Html中CSS的介绍

Html中CSS的介绍

一、CSS介绍

1.1、CSS基本概念

CSS用于web开发中对标签的样式进行编辑的语言。CSS样式学习分为属性和选择器两个部分。

1.2、CSS基本使用格式

<style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
            ...
        }
</style>

1.3、使用步骤

1、创建一个html文档。
2、在body标签中将网页中显示的标签定义出来。
3、在head标签中创建style标签。
4、在style标签中设置样式。样式的基本书写格式看1.2。

1.4、注意事项

1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
2.style标签中的type属性其实可以不用写, 默认就是type=“text/css”
3.设置样式时必须按照固定的格式来设置. key: value;，其中:不能省略, 分号大多数情况下也不能省略

二、CSS特性

2.1、继承性

功能: 给父元素设置一些属性, 子元素也可以使用这些属性, 这个我们就称之为继承性。
注意点:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承。
3.继承性中的特殊性。
3.1、a标签的文字颜色和下划线是不能继承的。
3.2、h标签的文字大小是不能继承的。
**应用场景:**一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容。

2.2、层叠性

功能: 层叠性就是CSS处理冲突的一种能力。
注意点:
1.层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性。

2.3、优先级

**功能:**当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定。
优先级判断的三种方式：
1.间接选中就是指继承，如果是间接选中, 那么就是谁离目标标签比较近就听谁的。
2.相同选择器(直接选中)，如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的。
3.不同选择器(直接选中)，如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠。
优先级判定顺序：id名称>class名称>标签名称>通配符>继承>浏览器默认。

2.4、!important

功能: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高。
基本使用格式：
选择器{
属性名称: 值!important;
}
**解释：**给选择器选中的标签中的一个属性的优先级提升到最高。
注意点:
1.!important只能用于直接选中, 不能用于间接选中。
2.通配符选择器选中的标签也是直接选中的。
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升。
4.!important必须写在属性值得分号前面。
5.!important前面的感叹号不能省略。

2.5、选择器的权重及技术方法

权重功能: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高。
权重的计算规则：
1.首先先计算选择器中有多少个id, id多的选择器优先级最高。
2.如果id的个数一样, 那么再看class名称的个数, class名称个数多的优先级最高。
3.如果class名称的个数也一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高。
4.如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的，也就是说优先级如果一样, 那么谁写在后面听谁的。
注意点:
1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的，即通过间接选中的选择器和提高直接选中的选择器指定了同一标签时使用直接选中的选择器里面的属性。

2.6、CSS样式书写格式

1.行内样式
书写格式：在标签上设置样式。
2.内嵌样式
书写格式：使用style标签包裹，里面使用选择器和属性设置样式。
3.外链样式 – 企业开发用外链样式
书写格式：
注意事项：需要书写css样式文件，格式为选择器和属性组合书写。
4.导入样式
书写格式：

外链样式和导入样式区别:
共同点: 都是将CSS代码写到了一个单独的文件中
不同点:
外链样式, 在显示网页时, 会先加载CSS文件, 再显示页面
导入样式, 在显示网页时, 会先显示界面, 再加载CSS文件
外链样式是通过一个HTML标签引入CSS的
导入样式是通过@import引入CSS的, 而@import是CSS2.1推出, 所以导入样式存在兼容问题
优先级问题
行内样式的优先级最高
其它写法谁写在后面就听谁的