目录:
学习资料:
尚硅谷前端HTML5视频_HTML & CSS 核心基础教程(103集实战教学,从入门到精通)
一、CSS
CSS,Cascading Style Sheet,层叠样式表,用来为网页创建样式表,通过样式表可以对网页进行装饰,设置字体样式、位置等。
所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。
而CSS就可以分别为网页的各个层次设置样式。
二、层叠样式的类型
1 内联样式
将CSS样式编写到元素的style属性当中
<body>
<p style="color:red">我是红色的</p>
<body>
这种样式成为内联样式,只对当前的元素中的内容起作用
不方便复用。结构与表现耦合,不方便后期维护,不推荐使用
2 内部样式
将CSS样式编写到<head>
中的<style>
标签里
<head>
<style type="text/css">
p{color:skyblue}
</style>
</head>
3 css文件
将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中。
在html文件中:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
href的值是文件路径
在css文件中:
p{color:yellow;font-size:200px}
这样使得结果与表现完全分离,实现样式复用、统一样式
另外也可利用浏览器缓存加快用户访问速度,因为不需要再将css文件读一遍。如果使用内部样式的话,则要重新读一遍。
三、CSS基础
1 选择器
通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。
2 声明块
声明块紧跟在选择器的后面,使用一对{}
扩起来。
声明块是一组一组的名值对
结构,名
是要设置的样式名,值
是样式的具体值,名与值之间用:
隔开
一个声明块中可以写多个声明,声明之间使用;
隔开
如上例:
p{color:yellow;font-size:200px}
p
为选择器,{}
及包括的内容为声明块,此声明块包含两组名值对。
3 分组/分类
- class
为元素设置class属性可以对对此元素进行分类,同一元素可以属于多类,不同类名之间用空格隔开
用选择器选择元素class属性的格式为:
属性名.class_name
例如:
<body>
<p class="color yellow">my color is yellow</p>
<p class="color green">my color is green</p>
</body>
p.color{background:pink}
p.yellow{color:yellow}
p.green{color:green}
效果:
一共有两句话,第一句话的class为color和yellow,第二句话的class为color和green。
为这两句话添加相同的分红底色:p.color{background:pink}
分别设置这两句话的文字颜色:p.yellow{color:yellow} p.green{color:green}
- id
可以为元素设置id属性,id,顾名思义代表着特定的某个元素,因此id的值不能复用,而class的值可以复用
用选择器选择id属性的格式为:
属性名#id
例如:
<body>
<p id="abc">my color is yellow</p>
<p id="def">my color is green</p>
</body>
#abc {color:yellow}
#def {color:green}
效果:
4 元素的父子关系
-
父元素
直接包含子元素的元素
-
子元素
直接被父元素包含的元素
-
祖先元素
直接或间接包含后代元素的元素
-
后代元素
直接或间接被祖先元素包含的元素
-
兄弟元素
同级元素
5 后代元素选择器
作用:选中指定元素的后代元素
语法:祖先元素 后代元素
例子:
<body>
<div class="first">
<p id="abc">my color is yellow</p>
<p id="def">my color is green</p>
<span>my color is blue</span>
</div>
<span>normal span</span>
</body>
.first p {background:pink}
.first #abc {color:yellow}
.first #def {color:green}
.first span {color:blue}
效果:
6 子元素选择器
作用:选中父元素的指定子元素
语法:父元素>子元素
7 兄弟选择器
-
选择紧邻的后面的一个兄弟元素
语法:
前一个元素 + 后一个元素
为sapn元素后面的p元素设置样式:
- span + p {}
-
选中后面的所有兄弟元素
语法:
前一个元素 ~ 后面所有
8 伪类选择器
伪类专门用来表示元素的一种特殊的状态,比如:访问过的超链接、普通的超链接、获取焦点的文本框,当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。
用法:
-
正常连接:a:link
-
访问过的链接:a:visited
-
鼠标滑过时的链接:a:hover
-
正在点击的链接:a:active
<body>
<div><a href="http://www.baidu.com" target="_blank" class="a1">百度</a></div>
</body>
.a1:link{color:red}
.a1:visited{color:orange}
.a1:hover{color:grey}
.a1:active{color:black}
9 否定伪类
否定伪类语法:p:not(.class_name) {}
例如:
- 为所有的p元素设置一个北京颜色,除了class值为hello的p元素:
p:not(.hellow) {}
10 伪元素
使用伪元素来表示元素中的一些特殊的位置-
- 首字母:p:first-letter{}
- 首行:p:first-line{}
- 元素最前端的部分:p:first-letter{}
- 元素最后端的部分:p:first-letter{}
p:first-letter{color:red}
p:first-line{background:pink}
p:before{content:"我在p元素前面 "}
p:after{content:" 我在p元素后面"}
11 title属性
title属性可以给任何标签指定标题,即当鼠标移入到元素上时,元素的title属性将会作为提示弹出显示
- 为含有title属性值的元素设置样式:
p[title_name]{}
- 为特定title值得元素设置样式
p[title_name=""]{}
- 为title值以特定字符开头的元素设置样式
p[title_name^=""]{}
- 为title值包含特定字符的元素设置样式
p[title_name$=""]{}
12 样式的继承
给父级元素设置样式,子级则继承
但不是所有的样式都会被继承,如背景样式
13 选择器的优先级
当使用不同的选择器(class、title、style、id、*)选中同一元素时,要遵循优先级:
- 内联样式(style属性):1000
- id:100
- 类和伪类:10
- 元素选择器:1
- 通配符:0
- 继承:没有
当选择器中包含多种选择器时,需要将多种选择器的优先级值相加再相加。但是,选择器的优先级值相加不会超过它的最大数量级。
如果选择器的优先级一样,则使用靠后的样式。
网友评论