CSS学习笔记(一)
-
CSS,即:层叠样式表(Cascading Style Sheets)
-
CSS文档,后缀名为:.css
-
CSS的引入方式如下:① 行间样式;② 页面级CSS;③ 外部CSS文件。
<!-- 1. 行间样式 --> <p style="width: 30px;height: 30px;background-color: aqua;">小方块</p>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS学习笔记</title> <!-- 2. 页面级样式 --> <style> p { width: 30px; height: 30px; background-color: aqua; } </style> </head> <body> <p>小方块</p> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS学习笔记</title> <!-- 3. 引入外部CSS文件 --> <link rel="stylesheet" href="123.css"> </head> <body> <p>小方块</p> </body> </html>
一、CSS选择器
<div id="one" class="box">
<h1 class="header">我是标题</h1>
<p class="content">内容</p>
<span>结尾</span>
<div>
<span>123</span>
</div>
</div>
<div id="two" class="square">方块1号</div>
<p class="square">方块2号</p>
对以上(HTML文档中的)元素进行选择并应用CSS样式可采取的选择器类型有如下几种:
- id选择器(一对一,标签和id名之间呈一一对应的关系)
/* 结构为:# + id名 */ #one { width:30px; height:30px; }
- class选择器(多对多,标签和class类名之间呈多对多的关系)
/* 结构为:. + class类名 */ .square { width:30px; height:30px; }
- 标签选择器
/* 结构为:标签名 */ div { width:30px; height:30px; }
- 通配符选择器(*)— 常用来初始化所有标签的样式
/* 结构为:* (星号) */ * { color: #f40; }
- 属性选择器
/* 结构为:[属性名] 或 [属性名=属性值]*/ [id] { /* 对设有id属性的标签设置样式]*/ width:30px; height:30px; } [id="one"] { /* 对设有id属性且id值为one的标签设置样式]*/ backgound-color: #f40; }
- 父子选择器(又称:派生选择器)
/* 结构为:父级元素 + 空格 + 子级元素 + ...*/ #one span { /* 即:为id为one的标签下所有的span标签设置样式 */ color: #f40; }
★★★ 浏览器在遍历父子选择器时,遍历顺序为:自右向左!
- 直接子元素选择器
/* 结构为:父级元素 + "大于"符号(>) + 子级元素 + ...*/ #one > span { /* 即:为id为one的标签的直接子元素(即:此处内容为“结尾”的span标签)设置样式 */ color: #f40; }
- 并列选择器(标签选择器和其他选择器并列时,应该将标签选择器放在最前面!)
/* 结构为:任意选择器(条件1) + 任意选择器(条件2)(注意:两个条件之间不能有空格) */ div.square { /* 即:为class类名为square的div标签设置样式 */ color: #f40; }
- 分组选择器(可用来简化代码)
/* 结构为:不同标签之间用英文逗号隔开,最好用一下格式写,方便维护 */ #one .header, #one .content, p.square { /* 即:将这三个标签中的内容的字体颜色设置为“淘宝红” */ color: #f40; }
- 伪类选择器
/* 结构为:在目标元素后加上:":hover" 等 */ .box:hover { /* 即:当鼠标移动到该class类名为box的元素上时,其上的字体颜色变为“淘宝红” */ color: #f40; }
二、CSS权重
★优先级★:!important > 行间样式 > id… > class… / 属性选择器 / 伪类… > 标签选择器 / 伪元素… > 通配符选择器 (注意:class选择器和属性选择器的优先级一样,谁在后面谁说了算!)
★上述优先级的 底层原理 如下表(浏览器会根据各自的权重值来计算谁的优先级更大):
类型 | 权重值 |
---|---|
!important | Infinity(正无穷) |
行间样式 | 1000 |
id | 100 |
class / 属性 / 伪类 | 10 |
标签 / 伪元素 | 1 |
通配符 | 0 |
1)CSS权重值采用的是:256进制
2)权重值越大,优先级越高;权重值一样,后面的覆盖前面的。
三、常用CSS样式
-
字体
font-size: 12px; <!-- 注意:① 浏览器默认的字体大小为:16px ; ② 一般网页的字体大小是:12px或14px ; ③ 设置字体的大小实际设置的是字体的高度。--> font-weight: bold; <!-- 注意:font-weight 的属性值有:lighter / normal / bold / bolder / 100、200、... 、900(定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。) --> font-style: italic; <!-- 注意:italic 表示 斜体。 --> font-family: arial; <!-- 注意:font-family 可定义各种字体样式。前端最常用的字体是:arial(乔布斯发明的)。 --> color: #f40; <!-- 注意:颜色的设置方法为:① 纯英文单词 eg:red ;② 颜色代码 eg: #f40 或 #ff4400 ; ③ 颜色函数 eg:rgb(255, 255, 255) -->
-
边框
border: 1px solid #f40; /* border-width: 1px; border-style: solid; border-color: #f40; */ border-left: 1px; /* border-right: 2px; border-top: 3px; border-bottom: 4px; */
★ 利用 border 绘制三角形 ★
-
文本
text-align: center;
文本对齐方式(center、left、right)
line-height: 30px;
单行文本的行高(单行文本的高度 = 容器的高度 ------ 垂直居中)
text-indent: 2em;
文本首行缩进(单位为:em)①【1em = 1 * font-size】
eg:文字的行高是1.2倍字体高度(line-height: 1.2em;
)
② 分辨率:每英寸能容纳的的垂直像素点数。
(一个像素点只能展示一个颜色单位,像素是相对单位)text-decoration: line-through;
中划线(属性值:line-through、underline、none、overline)
cursor: pointer;
光标设置(属性值:pointer、help、……)
四、元素的分类
- 行级元素(又称:内联样式)— inline
★特点★:1)内容决定元素所占位置;2)不可以通过CSS改变宽高。
eg:span、strong、em、a、del - 块级元素 — block
★特点★:1)独占一行;2)可以通过CSS改变宽高。
eg:div、p、ol、ul、li、form、address - 行级块元素 — inline-block
★特点★:1)内容决定元素所占位置;2)可以通过CSS改变宽高。
eg:img
【注意】凡是带有 inline 的元素,都具有文字特性 !!!
五、开发经验
- 下图内容是一种常用的开发技巧:(现在CSS中定义功能,后在HTML中选配功能,用以提高开发效率,减少代码冗余度。)
- 标签选择器,常被用来初始化标签:
- 通配符选择器,常被用来初始化所有标签:
六、CSS盒模型
- 内边距样式
设置方式 属性值的含义 padding: 6px 6px 6px 6px;
上—右---下—左 padding: 6px 6px 6px;
上—左右—下 padding: 6px 6px;
上下—左右 padding: 6px;
四个方向都一样 - 外边距样式
设置方式 属性值的含义 margin: 6px 6px 6px 6px;
上—右---下—左 margin: 6px 6px 6px;
上—左右—下 margin: 6px 6px;
上下—左右 margin: 6px;
四个方向都一样 - CSS盒模型
- CSS盒模型的计算问题
- 小实例(绘制一个简易的“远视图”)
【补充】<body></body>
标签有一个默认的 margin 为:8 px
七、定位(position)
- absolute(绝对定位)
★特点★:1)脱离原来位置进行定位;2)相对于最近的有定位的父级进行定位,如果没有,那么相对于文档进行定位。 - relative(相对定位)
★特点★:1)保留原来位置进行定位;2)相对于自己原来的位置进行定位。 - fixed(固定定位)
★特点★:将DOM元素固定在可视窗口的某个位置,并且其位置不随滚动条的滚动而变化。
z-index :此属性只能在有定位的DOM元素中生效。该属性可以设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。(如果为正数,则离用户更近,为负数则表示离用户更远。)
八、Demo(实现:奥运五环)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>奥运五环</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
margin: 30px auto;
width: 340px;
}
.top {
margin: 0 auto;
width: 100%;
height: 106px;
}
.bottom {
position: absolute;
left: 50%;
top: 50%;
width: 224px;
height: 106px;
margin-left: -112px;
margin-right: -53px;
}
.circle {
width: 100px;
height: 100px;
border: 3px solid #000;
border-radius: 50%;
float: left;
margin-left: 10px;
}
.circle:first-child {
margin-left: 0;
}
.blue {
border-color: blue;
}
.black {
border-color: black;
}
.red {
border-color: red;
}
.orange {
border-color: orange;
}
.green {
border-color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="blue circle"></div>
<div class="black circle"></div>
<div class="red circle"></div>
</div>
<div class="bottom">
<div class="orange circle"></div>
<div class="green circle"></div>
</div>
</div>
</body>
</html>
总结自《渡一教育_2020权威HTML+CSS零基础入学》