层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种样式表语言,用于渲染HTML元素标签的样式。
在html中。
CSS的样式分为三种:行内样式、内部样式、外部样式。
行内样式是写在html元素中,利用style属性对元素进行样式设计。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<P>Lorem.P>
<P style="font-size: 30px;color: #46fa4a;">Natus.P>
<P style="font-size: 40px;color: #eee666;">Sit.P>
<P style="font-size: 50px;color: #ef0fef;">Aliquam.P>
<P style="font-size: 60px;color:#000;">Voluptas!P>
body>
html>
内部样式通过在 部分定义
标签书写嵌套样式,在
标签中可以使用标签选择器,类选择器,id选择器等去给标签设置属性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box p{
font-size: 28px;
color: #ff4400;;
}
style>
head>
<body>
<div class="box">
<p>Lorem, ipsum.p>
<p>Pariatur, reprehenderit!p>
<p>Explicabo, accusamus.p>
div>
<p>Lorem, ipsum.p>
<p>Explicabo, culpa.p>
<p>A, esse?p>
body>
html>
效果图如下:
可以看到在div里面的p标签样式改变了,也可以去改变每一个p标签,给每个p标签设置一个class。
div外面的三个p标签的样式却没有改变,这个涉及到选择器的使用,这个外面放到下一篇博客去专门讲。
外部样式当样式需要被应用到很多页面的时候,将会使用外联样式,通过更改一个文件来改变所以页面的样式。
我们一般是使用在标签中引入
标签,
,
rel:指定资源跟页面的关系
href:资源的地址,为需要引入的css文件,如下所示。
<html lang="en">
<head>
<meta charset="UTF-8"
name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="./css/reset.css">
head>
单独的css文件是以.css为后缀名的文件,在该文件内可以直接设置标签样式,不需要包在标签里,如下图所示:
外部样式的引用还有一种方式@import url(./index.css)
这两种方式的区别:
下面给大家简单的介绍一下几种样式。
颜色表示法
<p style="color: blue;">Lorem.p>
<p style="color: #000fff;">Vel!p>
<p style="color: rgb(0,0,255);">Nostrum.p>
背景样式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
width: 1200px;
height: 160px;
background-image: url("../img/index/217.jpg");
}
style>
head>
<body>
<div>div>
body>
html>
边框样式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
width: 1200px;
height: 160px;
border: 1px solid #f40;
}
style>
head>
<body>
<div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus atque quia facere distinctio debitis, in vel expedita ullam amet nam sunt fugiat alias ducimus voluptatum illo ipsa! Totam, magnam eligendi!
p>
div>
body>
html>
font-family:字体类型
font-size:字体大小(默认大小16px),字体大小一般为偶数
font-weight:字体粗细(单词[normal正常、bold加粗]; 数字[100-500正常、600-900加粗])
font-style:字体样式(normal正常、italic斜体[italic所有带有倾斜字体的可以设置;oblique没有倾斜属性的字体也可以设置倾斜])
color:字体颜色
复合样式:font:weight style size family
、font:style weight size family
、font:weight style size/line-height family
顺带提一下样式继承以及优先级
文字相关的样式可以被继承
布局相关的样式不能被继承(默认不继承,可以使用inherit值让其继承)