1、什么是结构和表现分离?
在页面中,使用html搭建页面的结构(页面的内容),不使用标签的属性设置样式,标签的样式全部在CSS中设置。
2、什么是CSS?
CSS是层叠样式表(Cascading Style Sheet)的简称
目前CSS3是新版本的CSS,与老版本(CSS2.1)相比在性能和成本上有大的提升。
3、如何使用CSS?
3.1、页面嵌入式: 页面嵌入式就是使用标签嵌入CSS规则
p{
color: red;
}
代码展示
Document - 锐客网 p{
color: red;
font-size: 30px;
}你好
效果展示
文章图片
3.2、行内嵌入式 给标签添加style属性,此效果只对嵌入标签有效。如:
你好
3.3、链接式 先建立独立的CSS文件。然后在页面中使用
标签链接外部的CSS文件,通常建议使用这种嵌入方式。代码展示
p{
color: blue;
font-size: 30px;
}
Document - 锐客网
你好
效果展示
文章图片
4、CSS的选择器
4.1、标签名选择器
标签名{属性名:值;
}
4.2、id选择器 给标签设置id属性,通过id属性值选择标签。标签的id属性值和之前提到的一样不能重复。
#id{
属性名:值;
}
4.3、类选择器 给标签设置class属性,通过class属性选择标签,class属性名可以重复。
.class属性值{
属性名:值;
}
4.4、通配符选择器 通配符(*),可以匹配页面中的任何元素
*{
属性名:值;
}
5、文本样式属性
5.1、字体样式:
字体样式 | 作用 |
---|---|
font-size | 设置字号(文字的大小) |
font-family | 设置字体(前提是本地装有相应字体 |
font-style | 字体的样式 |
font-weight | 字体的粗细(数值从100-900,数值越大字体越粗) |
@font-face | 当本地并无相应字体时,可设置服务端字型(该属性是CSS3新增的样式属性) |
文本样式 | 作用 |
---|---|
color | 定义文本颜色(颜色表示方式和之前博客提到一样) |
letter-spacing | 设置字符之间的间距 |
word-spacing | 该属性用于英文单词之间的间距,对中文无效 |
line-height | 设置行高 |
text-algin | 设置内容的对齐方式 |
text-transform | 控制英文大小写 |
text-decoration | 设置文本的下划线、上划线、删除线 |
text-indent | 设置首行文本的缩进 |
text-shadow | 设置文本的阴影效果 |
text-overflow | 文本的溢出效果(结合overflow属性使用) |
word-wrap | 设置长单词和URL地址的自动换行 |
CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
属性选择器 | 作用 |
---|---|
E[att] | 选择具有att属性的元素 |
E[att=“val”] | 选择具有att属性,并且att属性值等于val的元素 |
E[att~=“val”] | 选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val |
E[att^=“val”] | 选择具有att属性,并且att属性值是以val开头的字符串 |
E[att$=“val”] | 选择具有att属性,并且att属性值是以val结尾的字符串 |
E[att*=“val”] | 选择具有att属性,并且att属性值中包含val的字符串 |
7、关系选择器
关系选择器 | 作用 |
---|---|
包含选择器(E F) | 选择所有被E包含的F元素 |
子元素选择器(E>F) | 选择所有作为E元素的子元素F |
相邻元素选择器(E+F) | 选择紧贴在E元素之后F元素 |
兄弟选择器(E~F) | 选择E元素后面的所有兄弟元素F |
关系选择器 - 锐客网 ul li{
color: crimson;
font-size: 30px;
}
nav>p{
color: blue;
font-size: 30px;
}
nav+p{
color: cadetblue;
font-size: 30px;
}
p~span{
color: gold;
font-size: 30px;
}
- 西游记
- 水浒传
- 红楼梦
- 三国演义
统计学
效果展示
文章图片
8、结构化的伪类选择器(伪类选择器带冒号)
结构化的伪类选择器 | 作用 |
---|---|
html:root | 根元素选择器。html文档中的根只有一个。样式应用于页面的每个元素 |
E:not(选择器) | 不包含给定选择器的元素 |
E:only-child | 匹配父元素仅有的一个子元素E |
E:first-child | 匹配父元素的第一个子元素E |
E:last-child | 匹配父元素的最后一个子元素E |
E:nth-child(n) | 匹配父元素中第(n)个子元素E |
E:nth-last-child(n) | 匹配父元素中倒数第(n)个子元素E |
E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E |
E:empty | 匹配没有任何子元素的元素E |
E:checked | 匹配用户界面上处于选中状态的元素E |
E:enabled | 匹配用户界面上处于可用状态的元素E |
E:disabled | 匹配用户界面上处于禁用状态的元素E |
9、伪对象选择器
伪对象选择器 | 作用 |
---|---|
E::before(CSS3) | 设置在对象前(依据对象树的逻辑结构)插入的内容。必须和content属性一起使用 |
E::after(CSS3) | 设置在对象后(依据对象树的逻辑结构)插入的内容。必须和content属性一起使用 |
伪对象选择器 - 锐客网 p::before{
color:cyan;
content: 'Manchester';
}
span::after{
color: cyan;
content: 'City';
}City
Manchester
效果展示
文章图片
10、超链接的伪类选择器
超链接的伪类选择器 | 作用 |
---|---|
E:link | 设置超链接a在未被访问前的样式。 |
E:visited | 设置超链接a在被访问后的样式 |
E:hover | 设置元素在其鼠标悬停时的样式 |
E:active | 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 |
超链接的伪类选择器 - 锐客网 a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
font-family: '楷体';
font-size: 40px;
}
a:active{
color: black;
}
"#">百度
效果展示
文章图片
鼠标悬停时的样式
文章图片
鼠标在点击的一瞬间的样式
文章图片
【html5|CSS层叠样式表】链接访问后的样式
推荐阅读
- 认识HTML及HTML标签(1)
- Html5|20 个超酷的 HTML5/CSS3 应用及源码
- css|【玩转CSS】一文带你了解浮动
- html|学成在线官网首页完整版(含psd源文件)
- html5|PYTHON构建简单 HTTP
- javascript案例|JS实现可拖拽的模态框
- Endnotes|origin双y轴数据散点图显示
- python|Python绘制简单的曲线图·
- web端|web全栈开发(web前后端数据交互。html5+jquery作为前端、Python+flask作为后端)