这是我参与「第四届青训营 」笔记创作活动的第2天。
1.css的三种引入方式
1.1 外链式
HTML代码与CSS代码分离开，写入不同文件，再使用 link 标签将CSS文件导入使用即可
格式:
<link ref="stylesheet" href="./style.css">
1.2 嵌入式
在 head 标签中写入 style 标签，将 css 样式写入 style 标签内部.
格式:
<style type="text/css"> h1{ color:blue; font-size:20pt;} h2{ color:blue; font-size:20pt;}</style>
1.3内联式
直接在HTML的标签内写入style属性
格式:
<h1style="background-color:silver;color:blue;">标题1</h1>
2.css的三种引入方式的缺点及优先级
2.1 外链式
推荐使用
2.2 嵌入式
适用于类名区分来对标签应用样式。
缺点：文本与样式写入同一文件，代码功能不够具体。
2.3 内联式
适用于测试或是需要单独标注的样式。
缺点：代码混乱。
2.4 优先级
内联式 > 嵌入式 > 外链式
可用“就近原则”来概括：
- 内部样式就在标签内，离标签最近，所以优先级最高；
- 嵌入样式在同一文件内，但是离标签比较远，优先级居中；
- 文件导入式不在同一文件，因此优先级最低。
3.css的工作流程图
4.css的选择器
4.1 选择器的作用:
找到页面中的元素,以便给它们设置样式.
4.2 选择元素的方式:
- 按照标签名,类名或id.
- 按照属性
- 按照DOM树中的位置.
4.3 选择器类型
通配选择器: 选中所有的标签.
id选择器: 选中对应id的标签,注意,标签应具有唯一性.
类选择器: 选中所有相同类名的标签, 为同一类型的标签添加样式时使用.
属性选择器: 选择拥有对应属性的标签,还可以进一步选中对应标签中拥有相应属性的标签以及根据不同规则进行匹配查找.
4.4 伪类(pseudo-classes)
定义: 不基于标签和属性定位元素,可分为:状态伪类和结构性伪类
状态伪类 : 根据标签的状态进行选择
结构性伪类 : 根据标签在DOM树中的位置进行选择
4.5 选择器组合
4.6 选择器组
5.css的常用样式
5.1 文本相关样式
文本颜色: 颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如:
＃FF0000 - 一个RGB值 - 如:
RGB(255,0,0) - 颜色的名称 - 如:
red
实例:
body { color:red; }h1 { color:#00ff00; }h2 { color:rgb(255,0,0); }
文本的对齐方式 : 文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
属性值:
实例:
h1{text-align:center;}h2{text-align:right;}p {text-align:justify;}
文本转换 : 文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
属性值:
实例:
h1 {text-transform:uppercase;}h2 {text-transform:lowercase;}p {text-transform:capitalize;}
文本缩进: 文本缩进属性是用来指定文本的第一行的缩进。
属性值:
实例:
p { text-indent:50px; }
5.2 字体相关样式
字体系列 : font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第 一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
多个字体系列是用一个逗号分隔指明：
实例:
p { font-family:"Times New Roman", Times, serif; }
字体样式: 主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
属性值:
实例:
h1 { font-style: normal; }h2 { font-style: italic; }h3 { font-style: oblique; }
字体大小: font-size 属性设置文本的大小。
属性值:
实例:
h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}
字体粗细: font-weight 属性设置不同的字体粗细.
属性值:
实例:
h1{font-weight:normal;}h2{font-weight:bold;}h3r{font-weight:900;}
5.3 边框相关样式
边框样式: 边框样式属性指定要显示什么样的边界, border-style属性用来定义边框的样式
属性值:
实例:
p { border-style:solid; }
边框宽度: 通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
属性值:
实例:
p { border-style:solid; border-width:5px;}
边框颜色: border-color属性用于设置边框的颜色。
可以设置的颜色：
- name - 指定颜色的名称，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
实例:
p { border-style:solid; border-color:red;}
6.个人总结
以上是新手在开始学习css中的常用的知识，具体的知识需要到官网或菜鸟教程等学习网站自行查找。新手在学习css过程中最重要的是上手敲代码，这样能加深印象，提高学习css的兴趣。
