CSS—引入方式、选择器、复合选择器、文字控制属性、CSS特性
目录
CSS
1.引入方式
2.选择器
3.复合选择器
4.文字控制属性
5.CSS特性
CSS
层叠样式表，是一种样式表语言，用来描述HTML文档的呈现
书写时一般按照顺序：盒子模型属性—>文字样式—>圆角、阴影等修饰属性
1.引入方式
| 引入方式 | 方法 | 特点 |
|---|---|---|
| 行内引入 | 直接写在标签的style属性内 | 一般配合JavaScript使用，难以维护 |
| 内部引入 | 在html代码中style标签下定义选择器 | 只对当前的网页有效，难以维护 |
| 链接方式 | 在html代码中head标签内使用link标签引入 | CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。先加载css，再显示HTML |
| 导入方式 | 在html代码中style标签内使用@import引入 | 先显示HTML，再加载css。CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入。 |
优先级：
【行内引入>链接方式和style标签谁在下面，谁的优先级高>内部引入>导入方式】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notes</title><style>/* css的内部引用，在style标签内引用 *//* 定义类选择器 */.red {color: red;line-height: 20px;height: 20px;}.size {size: 20px;}/* 定义id选择器 */#blue {color: blue;font-size: 20px;line-height: 40px;}/* 通配符选择器 */* {color: pink;}/* 盒子模型 */.box {background-color: peru;/* 添加内减属性，避免撑大盒子 */box-sizing: border-box;width: 100px;height: 60px;padding: 10px 20px;border-top: 5px solid #000;border-right: 2px solid #000;/* 版心居中，必须设置好盒子宽度 */margin: 0 auto;border-radius: 50%;}.box1 {background-color: yellow;line-height: 100px;/* 透明度设置 */opacity: 0.5;}.box1:hover {background-color: aqua;}</style>
</head>
<body><h1>h1</h1><!-- 类选择器的使用 --><strong><h2 class="red size">h2</h2></strong><p class="red">p 类选择器根据类名来选择前面以”.”来标志<span>子级1</span><span>子级2</span></p><br><hr><div id="blue">div要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的。类选择器根据类名来选择</div><br><div class="box"></div><span class="box1">行内元素</span><br><span>span</span><br><div>la la </div><!-- css的外部引用，用link标签引入 --><link rel="stylesheet" href=""><!-- css的行内引用, 直接写在标签的style属性内,配合JavaScript使用 --><div style="color: blue; font-size: 20px;">div标签css行内引用</div></body>
</html>2.选择器
| 选择器 | 特点 |
|---|---|
| 标签选择器 | 使用标签名作为选择器，选中同名标签设置相同的样式 |
| 类选择器 | 查找标签，差异化设置标签的显示效果，一个类选择器可以定义多个标签，一个标签允许加多个class属性。多个类属性可用-隔开，如：news-td。 |
| id选择器 | 查找标签，差异化设置标签的显示效果，一般与JS配合使用，很少使用CSS样式。同一个id选择器在一个页面只能使用一次。 |
| 通配符选择器 | 查找页面所有标签，设置相同样式，注意不需要调用，浏览器自动查找页面所有标签，设置相同的格式。在制作网页的初期，清除标签默认样式，便于后续个性化设置。 |
| 结构伪类选择器 | 根据元素的结构关系，差异化设置标签属性。:nth-child(公式)可以根据公式选择对应标签的属性 |
| 伪元素选择器 | 创建虚拟元素，用来摆放装饰性内容 |
:nth-child(公式)可以根据公式选择对应标签的属性
3.复合选择器
css选择器总结大全：CSS 选择器参考手册
包括孙子，重孙子等级别
建议逗号隔开后换行，书写格式更规范
任何标签都可以设置鼠标悬停状态
4.文字控制属性
| 描述 | 属性 |
|---|---|
| 字体大小 | font-size |
| 字体粗细 | font-weight |
| 字体倾斜 | font-style |
| 行高 | line-height |
| 字体族 | font-family |
| 字体复合属性 | font |
| 文本缩进 | text-indent |
| 文本对齐 | text-align |
| 修饰线 | text-decoration |
| 颜色 | color |
-
字体大小：
PC端网页最常用的是像素px，且必须要带单位，谷歌默认字体是16像素
p {font-size:30px; } -
字体粗细：
行高=文本高度+上间距+下间距
注意：添加单位px表示行高，不加单位表示当前标签属性值的倍数！
5.CSS特性
- 继承性
一般将文字属性设置在body标签里，继承给子集，如果要单独设置其中某标签性质，则使用类选择器。
a标签不能继承字体颜色color
h标签不能继承font-weight
b.strong不能继承font-weight
i,em不能继承font-style
注意，如果标签自己有样式，则生效自己单独的样式，不继承，比如标题标签有自己的文字属性，超链接等
- 层叠性
相同的属性会覆盖，后面的CSS属性覆盖前面的CSS属性。
不同的属性会叠加，不同的CSS属性都生效。
- 优先级
当一个标签使用了多种选择器时，基于不同选择器的匹配方式。选择器优先级高的样式生效。
通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important
【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】