CSS使用方式
1 行内样式/内联样式
借助于style标签属性,为当前的元素添加样式声明
<标签名 style="样式声明">
CSS样式声明:由CSS属性和值组成
例如:style="属性:值;属性:值;"
常用CSS属性:
- 设置文本颜色 color:red;
- 设置背景颜色 background-color:green
- 设置字体大小:font-size:32px
示例:
<body>
<p style="color:red">和乐天春词
新妆宜面下朱楼,
深锁春光一院愁。
行到中庭数花朵,
蜻蜓飞上玉搔头。</p>
</body>
浏览器效果:
2 内嵌样式
借助于style标签,在HTML稳定中嵌入CSS样式代码,可以实现CSS样式与HTML标签之间的分离。同时需借助选择器到HTML中匹配元素并应用样式。
使用方式:
<style>
选择器 {
属性:值;
属性:值;
}
</style>
选择器:通过标签名或某些属性值到页面中选取相应的元素,为其应用样式。
示例:
<style type="text/css">
p {
color: blue;
}
#div1 {
background-color: red;
}
</style>
<body>
<p>和乐天春词 新妆宜面下朱楼,
深锁春光一院愁。行到中庭数花朵,蜻蜓飞上玉搔头。
</p>
<div id="div1">
更深月色半人家,北斗阑干南斗斜。 今夜偏知春气暖,虫声新透绿窗纱。
</div>
</body>
浏览器效果:
3 外链样式表
- 创建外部样式表文件,后缀使用.css
- 在HTML文件中使用<link>标签引入外部样式表:<link rel="stylesheet" href="URL" type="text/css">
- 样式表文件中借助选择器匹配元素应用样式
样式表特征
1. 层叠性
多组CSS样式共同作用于一个元素
2. 继承性
后代元素可以继承祖先元素中的某些样式。例:大部分的文本属性都可以被继承
3. 样式表的优先级
优先级用来解决样式冲突问题。同一个元素的同一个样式,在不同地方多次进行设置,最终选用哪一种样式:
- 离元素最近的样式优先级最高(就近原则)
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者优先级高
- 浏览器默认样式和继承样式优先级较低
CSS选择器
1. 作用
匹配文档中的某些元素为其应用样式
2. 分类:
1) 标准选择器
根据标签匹配文档中所有该元素
语法:
标签名 {
属性名:属性值;
}
2) id选择器
根据元素的id属性值匹配文档中唯一的元素,id具有唯一性,不能重复使用。
注意:
id属性值自定义,可以由数字,字母,下划线,-组成,不能一数字开头,尽量见名知意,可以使用连字符,下划线,小驼峰标识。
#id属性值{
}
3) class选择器/类选择器
根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
特殊用法:
- 类选择器与其它选择器结合使用,注意标签与类选择器结合时,标签在前,类选择器在后
- class属性值可以写多个,共同应用类选择器的样式
.class属性值 {
}
4) 群组选择器
为一组元素统一设置样式
语法:
selector1,selector2,selector3{
}
5) 后代选择器
匹配满足选择器的所有后代元素(包括直接子元素和间接子元素)
匹配selector1中所有满足selector2的后代元素
语法:
selector1 selector2{
}
示例:
div p{
color: purple;
}
div p span{
color: aqua;
}
<div>
<p>
我时div中的p元素
<span>我是div下p中的span</span>
/p>
</div>
6) 子代选择器
匹配满足选择器的所有直接子元素
语法:
selector1>selector2{
}
7) 伪类选择器
为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类:
- :link 超链接访问前的状态
- :visited 超链接访问后的状态
- :hover 鼠标滑过的状态
- :active 鼠标点按不抬起的状态(激活)
- :focus 焦点状态(文本框被编辑时旧称为获取焦点)
用法示例:
a:link{
}
a:visited{
}
.c1:hover(
)
注意:
超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写:
:link
:visited
:hover
:active
超链接常用设置:
a{
/* 统一设置超链接默认样式(不分状态) */
}
a:hover{
/* 鼠标滑过时改样式 */
}
3. 选择器优先级
使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高
选择器 | 权重 |
标签选择器 | 1 |
(伪)类选择器 | 10 |
id选择器 | 100 |
行内样式 | 1000 |
复杂选择器(后代,子代,伪类)最终的权重伪各个选择器权重之和,群组选择器权重以每个选择器单独的权重为准,不进行相加计算。
示例:
/* 群组选择器之间相互独立,不影响优先级 */
body,h1,p{ /* 标签选择器权重为1 */
color:blue;
}
.c1 a{ /* 当前组合选择器权重为10+1 */
color:green;
}
#d1>.c2{ /* 当前组合选择器权重为100+10 */
color:blue;
}
元素的尺寸和颜色
1.元素尺寸
- px像素单位
- 百分比%相对父元素
- 相对单位em (1em=16px,通常用于移动端的页面开发,常用1.5em)
- rpx=小程序页面的单位
- 当页面元素的内容大小超过了元素的宽度,可以使用overflow属性来解决超出部分的显示方式,建议使用auto;
2. 颜色
- 元素的字体,背景,边框
- 使用方式color:red;
- 英文单词
- rgb
- rgb(0-255)rgb(2,3,5)
- rgba(0-1)
- 16进制
- 长的16进制:#ffffff; #000000
- 短的16进制:#fff;#000
示例:
css代码:
<style>
body{
font-size: 12px;
}
table {
width: 990px;
border-bottom: solid 1px #ccc;
}
.w610 {
width: 610px;
}
th{
border-bottom: solid 1px #ccc ;
}
table tr td {
text-align: center;
border-bottom: dashed 1px #eee;
color: #9a9c9a;
}
.left {
text-align: left;
}
a{
text-decoration: none;
}
a:link{
color: #005aa0;
}
</style>
html代码:
<body>
<table>
<tr>
<th class="w610">主题</th>
<th>回复/浏览</th>
<th>作者</th>
<th>时间</th>
</tr>
<tr>
<td class="left"><a href="#">关关雎鸠,在河之洲。窈窕淑女,君子好逑。</a></td>
<td>0/0</td>
<td><a href="#">张三</a></td>
<td>2022-04-10</td>
</tr>
<tr>
<td class="left"><a href="#">关关雎鸠,在河之洲。窈窕淑女,君子好逑。</a></td>
<td>0/0</td>
<td><a href="#">张三</a></td>
<td>2022-04-10</td>
</tr>
<tr>
<td class="left"><a href="#">关关雎鸠,在河之洲。窈窕淑女,君子好逑。</a></td>
<td>0/0</td>
<td><a href="#">张三</a></td>
<td>2022-04-10</td>
</tr>
<tr>
<td class="left"><a href="#">关关雎鸠,在河之洲。窈窕淑女,君子好逑。</a></td>
<td>0/0</td>
<td><a href="#">张三</a></td>
<td>2022-04-10</td>
</tr>
</table>
</body>
浏览器效果: