CSS入门篇
Cascading Style Sheets，层叠样式表。 css也是标记语言设置HTML页面中的文本内容,图片的外形以及版面的排版显示。
分类：
1.行内css
将一个标签的样式直接写在这个标签元素的开头标签中，以标签的style属性开始书写其样式规则。
<标签 style=“样式1:样式值1;样式2:样式值2;…”></标签>
2.内部css
在html文件内部，标准位置在head标签中title标签下面，先写一个style标签，
然后在style标签内书写这个html的样式规则。
html
<style> 选择器{
样式1:样式值1
}
<style>
-
外部CSS 专门创建一个CSS文件，然后在这个CSS文件中书写CSS样式规则，然后在需要使用这个样式的HTML文件中的head标签内部的title标签下面，使用link标签引用这个CSS文件 css
选择器{
样式1:样式值1;
样式2:样式值2;
…
}
html
<link rel="stylesheet" href="css文件路径"/>
总结
三种样式均可正常使用
控制范围：外部css>内部css>行内css
使用场景：工作（外部css），学习（内部css）。
选择器
常用的选择器有；
标签选择器：
直接使用标签的名称作为选择器进行使用，可以使用标签选择器选择一个HTML中的所有该标签。
…css
标签名{
样式内容
}
类选择器：
类是指分类，将具有相同样式的标签先全部划分为一类，给所有这类标签使用class属性设置同一个类名，然后在css里面使用.类名作为选择器。
…css
.类名{
… 样式内容
}
id选择器：
给某个标签设置一个Id属性，然后在CSS中使用#Id名作为选择器。注意，因为同一个html文件中所有标签Id的唯一性，导致Id选择器只能控制一个标签的样式，和行内标签作用类似。
…css
Id名{
… 样式内容
}
伪类选择器：
lvha，这四个伪类如果要全部使用，顺序不能乱
- link：超链接未被点击
- visited：超链接被点击之后
- hover：鼠标悬停在其上的时候
- active：鼠标点下的时候
CSS元素
显示模式；元素(标签)以什么方式在浏览器内显示，浏览器对标签的默认显示方式。
在HTML学习中我们知道标签分为两种：“单标签” “双标签”。
标签的两种显示方式：一种独占一整行、还有一种只占内容本身。
元素的分类
根据元素的显示形式将标签元素划分为两类：
- 以div为代表的，块级元素，这类标签默认占一整行
- 以span为代表的，行内元素，这类标签由内容决定大小
块级元素特点；
- 每个块级元素独占一行
- 可以设置宽和高，可以设置内外边距
- 内部可以嵌套任何元素
- 不设置宽度默认占父容器的100%
行内元素特点；
- 相邻的行内元素在一行，一行可以显示多个
- 高，宽度直接设置无效的
- 行内元素只能容纳文本或者其他的行内元素
- 不设置宽度默认占内容的宽度
行内块元素特点；
- 和相邻的行内元素(行内块)在一行上，但是他们之间空白的缝隙，一行显示多个
- 默认宽度是内容的宽度(行内元素的特点)
- 高度，行高，边距以内边距都可以控制 （块元素的特点）
元素类型转换；
display属性进行元素类型转换
- none：隐藏该元素
- block：将元素转为块元素或显示元素
- inline：将元素转为行内块元素
- inline-block：将元素转为行内块元素.
css三大特征
一、层叠性
相同选择器给设置相同的样式，这样的话后面的样式会覆盖(层叠)先前的样式，层叠性能够解决标签的样式冲突问题
层叠性的原则：
- 样式属性冲突：遵循就近原则，哪个样式距离结构近，就执行哪个
- 样式属性不冲突，不会层叠。
二、继承性
CSS中的继承：子标签会继承父标签的某些样式属性，如：文本颜色，文字大小等
子元素虽然没有设置某些样式属性，但是其父元素拥有这些样式属性，会导致子元素也拥有了这些样式属性的特征。
三、优先级
当同一个元素指定了多个选择器，就会产生优先级的问题
- 选择器相同，则执行层叠操作
- 选择器不相同，则计算权重之后根据权重进行执行。
来源：https://www./content-4-820451.html
|
