荐 CSS&CSS3
程序员文章站
2022-03-11 16:07:01
该内容将持续更新,会出现覆盖情况,直到更新完成所以,前面的一些内容也会得到一些补充1. 引入CSS样式行内样式表(内联样式表)内部样式表(内嵌样式表)外部样式表(外链式样式表)CSS.demo1
该内容将持续更新,会出现覆盖情况,直到更新完成
所以,前面的一些内容也会得到一些补充
1. 引入CSS样式
- 行内样式表(内联样式表)
- 内部样式表(内嵌样式表)
- 外部样式表(外链式样式表)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS.demo1</title>
<link rel="stylesheet" href="../CSS/demo1.css" type="text/css" /> <!--先加载CSS后HTML(链接外部样式)-->
<!-- <style type="text/css">
</style> -->
<!-- <style type="text/css">
先加载HTML后CSS,对页面性能有影响(导入外部样式)
@import url("./CSS/demo1.css");
</style> -->
</head>
<body>
<!-- <p style=""></p> -->
</body>
</html>
样式表 | 优点 | 缺点 | 作用范围 |
---|---|---|---|
行内样式表 | 权重高 | 未实现样式和结构相分离 | 最用于一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 最用于一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 作用于一个站点 |
2. 选择器
2.1 基础选择器
-
标签选择器——选择某一类标签
-
类选择器
-
在标签中设置class属性
-
CSS文件中–>
.class_name{}
-
相同class可以使用多次
-
/* demo3.css */
html{
font-size: 100px;
font-weight: bold;
letter-spacing: -15px;
}
.G{
color: #4285f4;
}
.o1{
color: #ea4335;
}
.o2{
color: #fbbc05;
}
.g{
color: #4285F4;
}
.l{
color: #34a853;
}
.e{
color: #ea4335;
}
<!-- demo3 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
<link rel="icon" href="../img/study.png" />
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
- 多类名
/* demo3.css */
.font100{
font-size: 100px;
font-weight: bold;
letter-spacing: -5px;
}
.G{
color: #4285f4;
}
.o1{
color: #ea4335;
}
.o2{
color: #fbbc05;
}
.g{
color: #4285F4;
}
.l{
color: #34a853;
}
.e{
color: #ea4335;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
<link rel="icon" href="../img/study.png" />
</head>
<body>
<span class="font100 G">G</span>
<span class="font100 o1">o</span>
<span class="font100 o2">o</span>
<span class="font100 g">g</span>
<span class="font100 l">l</span>
<span class="font100 e">e</span>
</body>
</html>
- id选择器
- 设置id
- 使用
#id{}
- 通配符选择器
- 使用
*{}
- 使用
2.2 复合选择器
- 后代选择器
父级 子级 …{}
- 选择元素或元素组的子孙后代
- 子元素选择器
父级>子级{}
- 只选择子级
- 交集选择器
- 既是又是
- eg:
p.hello{}
(既是p标签又是hello类)
- 并集选择器
- eg:
span,div{}
(span和div标签)
- eg:
- 链接伪类选择器
-
a:link
未访问链接状态 -
a:visited
访问过的链接状态 -
a:hover
鼠标移动上去的链接状态 -
a:active
点击时的链接状态 - 连接顺序 l,v,h,a(love hate) 顺序不对会出错
-
3. 字体样式
3.1 font字体
样式 | 说明 | 属性 |
---|---|---|
font-size | 字体大小 | size |
font-family | 字体(可以多种字体) | 字体英文名、unicode字体 |
font-weight | 字体粗细 | normal、bold、100-900(整百) |
font-style | 字体风格 | normal、italic |
综合语法: font: style weight size/line-height family
- 字体大小和字体样式是不可以省略的,其它的可以省略
3.2 其它样式
属性 | 表示 | 属性值 |
---|---|---|
color | 颜色 | color |
line-height | 行高 | height |
text-align | 水平对齐 | left、right、center |
text-indent | 首行缩进(汉字一般是两个缩进) | …(1em=1个字大小) |
text-decoration | 文本装饰 | none、underline、overline、line-through |
3.3 line-height使用
3.3.1 标线
- 顶线
- 底线
- 中线
- 基线
3.3.2 行高
- 行高为基线与基线的距离
- 行高=上距离+文字高度+下距离(上距离=下距离)
- 默认行高=font-size+4px
3.3.3 单行文本的垂直居中
- 使行高=高度(设置行高可以理解为设置上距离和下距离)
- 行高>高度 --> 文字偏下
- 行高<高度 --> 文字偏上
4. 标签的显示模式
4.1 块级元素(block)
4.1.1 常见标签
- <h1>~<h6>
- <p>
- <div>
- <ul>
- <ol>
- <li>
4.1.2 特点
- 块级元素独占一行
- 高度、宽度、内外边距都可以设置
- 宽度默认是父级容器100%
- 里面可以放行内元素和块级元素
- 注意
- p不能放块级元素
- h1~h6,dt都是文字块级标签,里面不能放其它块级元素
4.2 行内元素(inline)
4.2.1 常见标签
- <a>
- <strong>
- <b>
- <em>
- <i>
- <del>
- <s>
- <ins>
- <u>
- <span>
4.2.2 特点
- 一行可以放多个行内元素
- 高宽不能直接设置
- 默认宽度是本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 注意
- 链接里面不能放链接
- 特殊情况下,链接可以放块级元素,但是链接转换成块级更安全
4.3 行内块元素(inline-block)
4.3.1 常见标签
- <img/>
- <input/>
- <td>
4.3.2 特点
- 一行可以放多个行内块元素,但是之间会有空白间隙
- 高度、宽度、内外边距都可以设置
- 默认宽度是本身内容的宽度
4.4 模式转换
- 转换为块级元素
display:block
- 转换为行内元素
display:inline
- 转换为行内块元素
display:inline-block
5. 背景
属性 | 描述 | 属性值 |
---|---|---|
background-color | 背景颜色 | transparent、color |
background-image | 背景图片(背景图片在背景颜色之上) | url(url) |
background-repeat | 背景平铺 | repeat(默认)、no-repeat、repeat-x、repeat-y |
background-position | 背景位置 | length||length(x坐标、y坐标)、position||position(top、center、bottom、left、center、right) |
background-attachment | 背景附着(相对于滚动条来说,如果是滚动,随滚动条移动;如果是固定,不随滚动条移动) | scroll、fixed |
background:rgba(r,g,b,a) | 背景透明,不会影响内容 | 0<=a<=1(支持.4=0.4的写法) |
- background-position注意
- 必须先指定background-image
- 如果指定两个方位词,与顺序无关
- 如果指定两个数值,前一个数值为x轴,后一个为y轴
- 如果数值和方位值混用,前一个为x轴,后一个为y轴
- 如果只指定一个方位词,另一个默认居中
- 如果指定一个数值,该数值为x轴,另一个默认居中
- 简写:
background:顺序不严格要求(一般是 color url repeat attachment position)
- rgba()在IE9以下不支持
6. CSS三大特性
6.1 层叠性
- 多种CSS样式的叠加
- 就近原则
- 样式不冲突不层叠
6.2 继承性
- 子标签可以继承父标签的样式
- text-,font-,line-开头是可以继承,文字样式color可以继承
6.3 优先级
6.3.1 权重计算
-
选择器相同,执行重叠性,就近原则
-
选择器不同,要计算权重(如果权重相同,就近原则)
选择器(一个元素) 权重 * 0,0,0,0 标签选择器,伪元素 0,0,0,1 类选择器,伪类,属性选择器 0,0,1,0 id选择器 0,1,0,0 行内样式 1,0,0,0 !important 无穷大
6.3.2 权重叠加
- 使用交集选择器和后代选择器等要利用权重叠加
6.3.3 权重其它问题
-
权重之间没有进位的
-
对于子代标签,对于一个CSS样式,如果没有选中子标签的,按照父标签的权重来计算;如果有选中子标签的,不管父类权重多大,看选中该标签的选择器的权重
| 0,0,0,0 |
| 标签选择器,伪元素 | 0,0,0,1 |
| 类选择器,伪类,属性选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| !important | 无穷大 |
6.3.2 权重叠加
- 使用交集选择器和后代选择器等要利用权重叠加
6.3.3 权重其它问题
- 权重之间没有进位的
- 对于子代标签,对于一个CSS样式,如果没有选中子标签的,按照父标签的权重来计算;如果有选中子标签的,不管父类权重多大,看选中该标签的选择器的权重
本文地址:https://blog.csdn.net/weixin_46005735/article/details/107326446