为网页添加样式
初识CSS
h1 {
color: white;
background-color: red;
text-align: center;
}
2
3
4
5
以上代码为一条css
规则;
包含: 选择器 + 声明块
术语解释
- 选择器: 用来选择元素
- 元素选择器: 直接写元素名称,选中所有相关元素。选择范围过广;
- id选择器:前面加
#
, 选中指定id唯一的元素。选择范围过小; - 类选择器**[推荐]**:前面加
.
, 选中一类元素。选择范围比较灵活。短横线连接命名法;
- 声明块: 声明样式
- 声明块中包含很多属性,以分号结束
- 每一个声明表示某一个属性
书写位置
内联样式表**[不推荐]**:inline
style="color:black"
内部样式表:
外部样式表**[推荐]**:css文件引用。写在独立的css文件中
link是空元素
推荐使用外部样式表的原因:
可以解决多页面样式重复/共用的问题
有利于浏览器缓存,从而提高页面响应速度
代码分离(HTML和CSS),更容易阅读和维护
如果样式在200行以内,可以尝试使用内部样式表。少读一个文件。提高首次响应速度。
常见样式申明
color
- 预设值:
color: blue
- 三原色,色值:
rgb(1,2,3) rgba(红,绿,蓝,透明)
每种颜色0~255之间的数字来表达;可以用调色板来选择颜色 - hex(16进制): #红绿蓝 每两位表示一个颜色
- 常见颜色:
- 淘宝红 #ff4400, 可简写为 #f40;
- 黑色 #000000, #000
- 白色 #ffffff, #fff
- 红色 #f00 ; 绿色 #0f0, 蓝色 #00f, 紫色#f0f, 黄#ff0, 情色#00f
- 灰色 #ccc;
background-color
- 元素背景颜色
font-size
元素内部文字尺寸大小
- px: 像素大小。 - em: 相对单位,相对于父元素的字体大小。父元素没有设置字体大小,会继承父元素的字体大小。html最顶端没有字体大小。使用基准字号,在浏览器设置中确定,一般为14px。 - User Agent, UA, 浏览器。 user agent stylesheet。 浏览器默认样式表
font-weight
文字粗细程度,可以取数字,页可以为预设值。 需要字体文件取适配
- normal -> 400;
- bold -> 700;
strong 元素表示强调, 。
font-family
文字类型,需要在用户的计算机中存在的字体;可以设置多个字体,适配问题
- Arial
- consolas
- font-family:翩翩体-简;
- sans-serif: 非衬线字体。 边缘没有修饰。
- 宋体:衬线字体打印出来比较好看
font-family:consolas,Arial,微软雅黑,sans-serif;
最后加上一个让系统选择一个默认的衬线字体。程序会依次查找。
font-style
字体样式, 斜体
font-style:italic
<i></i>
默认样式为倾斜字体。通常用它表示一个图标。标准,是用特殊的语调朗读内容,em 元素 也是斜体
text-decoration
给文字加线。
text-decoration:line-through
中间加线 underline
底下加线(超级链接的样式)
- a元素, 有下划线
- del元素表示错误的内容 Text that has removed during edit
<del>test del element</del>
,错误或者废弃的内容, 中间加删除线; - s元素表示过期的内容 Text that is out dated
text-indent
首行文本缩进.属性值可以是 10px;
或者 2em;
line-height
行高。和文字框有关。一行文本有多高。
行高常见的两种用法:
- 单行文本:设置行高为容器的高度。可以让单行文本垂直居中.
- 多行文本:
多行文本line-height 一般不用绝对值。
line-height=1.5, 表示相对于当前元素的字体大小。 通常不用em
width/height
像素
letter-space
文字间隙。像素px或em
text-align
元素内部的文字水平排列方式
left/center/right
选择器
目标是精准的选择想要的元素
简单选择器
ID选择器
元素选择器
类选择器
通配符选择器
*
星号表示选择所有元素。包括head,body属性选择器
根据属性名和属性值来选择元素。
[href]{color:red;}
具有href属性的元素;[href="Https://www.sina.com"]{color: red}
具有特定属性值的元素;^= 表示开始, $=表示结束
详细可以参考 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
伪类选择器
选择某些元素的某种状
a:hover
移动到所有元素上都变成红色
:hover {
color:red;
}
/选中鼠标悬停时候的a元素/
a:hover{
color:red
}
2
3
4
5
6
7
8
a:active
指鼠标按下去时候的状态
a:link: 超级链接没有被访问时候的状态
a:visited :超级链接访问后的颜色
4个属性编写的顺序 link, visited, hover, active
爱恨法则: love hate;
:first-child
:last-child
- 伪元素选择器
通常用于选中某个元素内的第一个或最后一个
:: before 在所选元素的最前面生成一个子元素。
span::before{
content:"《"
}
span::after{
content:"》"
}
帮你生产一个新元素
2
3
4
5
6
7
选择器的组合
多个选择器放一起,表示并且。
后代元素 -- 空格连接 【用的最多】
子元素 -- >
相邻的下一个兄弟元素 -- +
后面出现的所有兄弟元素 -- ~
选择器的并列
多个选择器用逗号分隔,
层叠【基础知识】
声明冲突:同一个样式,多次用到同一个元素;
层叠:解决声明冲突的过程。浏览器自动处理 (权重计算)
比较重要性
- 重要性从高到低
- 作者样式表 !important样式(开发者书写的样式)
{color:red !important}
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
- 作者样式表 !important样式(开发者书写的样式)
比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊 内联>ID > 类 > 元素 选择
通过选择器计算出一个4位数 XXXX
- 千位:如果是内联样式,记作1,否则记0
- 百位:选择器中id选择器的数量
- 十位:类选择器、属性选择器、伪类选择器的数量
- 个位:元素选择器,伪元素选择器的数量
比较源次序
代码靠后的胜出
层叠的应用
重置样式表。
书写一些作者样式。覆盖浏览器的默认样式。
reset.css
mystyle.css
常见的重置样式表:- normalize.css
- reset.css
- meyer.css
爱恨法则:
- link visited hover active