一、CSS定义
根据W3C(标准化组织,专门制定web标准)定义:
- CSS:Cascading Style Sheets,层叠样式表,用于定义文档的样式和布局,有简单的交互效果。(表示型语言) 1998年引入CSS,目前使用的是CSS3。
二、常见CSS属性
-
颜色单位
表示方式有四种:
①关键字
②HEX16进制表示法:由#后面跟3位或者6位数组成,用0-9以及大小写a-f组成,这些值映射到红、绿、蓝颜色通道。
如:color(#ff0000)
③RGB值:由rgb()函数声明,每个值都是从0-255的整数,0为纯黑,255为纯白。
如:rgb(54, 162, 255)
rgba()函数前面三个与rgb()函数相同,但是最后一位代表饱和度,数值为0-1。
如:rgb(65, 150, 205,0.7)
④HSL值:由hsl()函数声明,表示一个颜色在色环上的角度,可以调整饱和度和亮度。
-
长度单位
-
绝对长度:
①1px的具体大小会根据设备的分辨率有所不同
②计算机屏幕由很多小点组成,一个点就是1px
③其他尺寸单位经过浏览器计算后都会变为px
-
相对长度
①%在不同的CSS属性中有不同的含义
②em为相对当前元素的字体大小
③rem为相对根元素的大小
(em、rem都会适应屏幕)
-
三、常用选择器类型:
-
元素选择器:元素名{声明块}
控制页面上所有该元素
p{ color:red; }
控制页面上所有p元素。
-
类选择器:.类名{声明块}
<h1 class="test">类选择器</h1>
.test{ color: chartreuse; background-color: coral; }
一个元素可以有多个类名,类名与类名之间用空格隔开。
-
id选择器:#id名{声明块}
<h1 id="box">id选择器</h1>
#box{ color: pink; }
一个元素只能有一个id,而且在页面上不能有重复的id名。
-
子级选择器:父元素>子元素{声明块}
<div> <p>子级选择器</p> </div>
div>p{ color: powderblue; }
选择某一元素下对应的子元素,可以进行连续选择,但只能一级一级选。
- 通配符:匹配页面所有元素,*{声明块}
*{
padding: 0;
margin: 0;
}
- 后代选择器:祖先元素(空格)后代元素{声明块}
<section>
<div>
<a href="">超链接</a>
</div>
</section>
section a{
text-decoration: none;
color: tomato;
}
- 并集选择器:同时选择多个选择器的内容,元素,元素,元素{声明块},用逗号隔开,也可以通过类名、id、子级、后代等等进行组合。
<section>
<div>
<a href="">超链接</a>
</div>
<b></b>
<strong></strong>
</section>
section a,b,strong,em{
font-size: 50px;
color: yellow;
}
i,abbr,blockquote,q,span,cite,cite{
color: palegreen;
}
- 伪类选择器:相同子元素应用不同的样式,元素:{选择器},first-child和last-child是常用的,表示第一个和最后一个子元素。
section>p:first-child{
color: purple;
}
section>p:last-child{
color: skyblue;
}
nth-child() 匹配父元素的第N个子元素:适用于父元素中的子元素都相同,比如下列的div中,section中因为包含了a,不会生效,这种情况需用nth-of-type()。
<section>
<a href="">链接1</a>
<a href="">链接2</a>
<p>第一个</p>
<a href="">链接3</a>
<a href="">链接4</a>
<p>第二个</p>
<p>第三个</p>
<a href="">链接5</a>
<p>第四个</p>
<p>第五个</p>
<p>第六个</p>
</section>
<h4>分隔线</h4>
<div>
<p>第一个</p>
<p>第二个</p>
<p>第三个</p>
<p>第四个</p>
<p>第五个</p>
</div>
①括号里直接跟数字
p:nth-child(2){
color: green;
}
会生效的只有div中第二个,section中因为第二个不是p标签,所以不生效。
②括号里写odd或者even:odd(奇数),even(偶数)
p:nth-child(odd){
color: hotpink;
}
p:nth-child(even){
color: olive;
}
③括号里写公式an+b:a或b可以为0,n=0,1,2,3.......
下列选择器2n会生效的是div中
第二个
、第四个
3n+1会生效的是div中
第一个
、第四个
p:nth-child(2n){
color: olive;
}
p:nth-child(3n+1){
color: skyblue;
}
nth-of-type() :匹配父元素中指定类型元素的第N个子元素:(括号里的三种情况与nth-child()相同)
p:nth-of-type(2){
color: green;
}
会生效的为section中
第二个
,div中第二个
a:nth-of-type(2){
color: green;
}
会生效的为section中链接2
- a标签配套的伪类选择器
:link 访问前
:visited 访问后
:hover 鼠标移入
:active 访问点击时
优先顺序从上到下,且在href没有属性时,:link不会生效。
-
属性选择器
[属性名+属性值]{声明块}或者[属性名]{声明块}
前者更精确
<a href="" target="_blank">超链接1</a> <a href="" target="_self">超链接2</a>
[target]{ color: lightpink; } [target="_self"]{ color: lime; }
-
伪元素选择器(元素名后面跟双冒号或者单冒号都可,为了和伪类区分,最好用双冒号)
格式:元素名::after{content:“在之后”}
元素名::before{content:“在之前”}
(上面两个声明块里必须有content,用来添加内容(也可不加,但一定要有),还可设置添加内容的样式,添加的内容是作为选中元素的子元素)
::first-letter 首字母
::first-line 第一行
::selection 用户选中的内容(一般用来设置选中后文本的颜色或者背景颜色)
四、关联CSS
(1)外部样式表:在head标记里通过link标签引入CSS文件。
<link rel="stylesheet" href="lesson01.css">
(2)内部样式表:在head标记里通过style标签书写CSS代码。
<style>
p{
color: blue;
font-size:100px ;
}
</style>
(3)行内/内嵌样式表:在开始标记里通过style属性书写CSS代码。
<p style="color: blue;font-size: 100px;">段落1</p>
(4)导入样式表:通过@import导入。
样式表优先级:就近原则,行内=>内部=>外部