CSS笔记

CSS概述

---

1.css是什么?

css是指层叠样式表
样式表:存储样式的地方
层叠:一层一层叠加,多个样式共同修饰一个HTML标签

2.css有什么用?

css就是用来更好的展示HTML页面

3.css代码规范

选择器:选择样式作用于哪个HTML标签上
选择器名称{属性名:属性值;属性名:属性值;}
属性与属性之间用分号隔开
属性与属性值直接冒号连接
如果一个属性有多个值的话,用空格隔开 注释:/* 注释内容 */

HTML与CSS的结合方式

---

CSS必须结合HTML来用;共有4种方式;

1.style属性方式:(内联样式)内部样式

所有的HTML标签都有一个style属性:style
style属性值中就是css代码
适合局部修改 <font style="font-size=150px;color=red;">标签内容</font>

2.style标签方式:(内嵌样式)内部样式

<style></style>存在于head标签之中

<style type="text/css">
    font{
        font-size:150px;color:red;
    }
</style>

页面的多个标签统一样式设置

3.导入方式:(外部样式中使用较少)

格式:@import url("css文件路径");
存在于 <style></style>标签中

4.链接方式(外部样式最常用的方式)

格式:<link rel="stylesheet" type="text/css" href="css文件路径"/>

4.1外部样式的好处:

提升了代码的复用性,更加易于维护,提高工作效率

4.2样式优先级:

内联样式>>内嵌样式==链接样式(就近原则)
特殊:color:yellow !important;可以把样式优先级 调整到最大

4.3链接方式和导入方式的区别:

1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载，在网速较慢时会出现网页没有样式的情况。（导入方式硬伤）
2、链接方式支持JavaScript修改样式，而导入方式不支持（导入方式硬伤）
3、链接方式可以引入样式也可以做其他事情。而导入方式只能引CSS
4、链接方式导入的CSS任何浏览器都OK，而导入方式要求浏览器版本必须在IE5以上
建议使用链接方式

css选择器

---

css选择器:指定了css样式作用于哪个标签上
标签又叫做元素.

1.元素选择器:

就是把HTML标签名作为选择器名称
格式:标签名{}

2.类选择器:

样式格式:.class名{}
标签格式:<p class="class名"></p>
能设置不同的标签的相同样式

3.id选择器(开发人员)

样式格式:#id名{}
标签格式:<p id="id"></p>
有针对性的设置样式
优先级最高

4.属性选择器(兼容性交差):

根据标签名和标签的属性名以及属性值来选择
样式格式:标签名[属性名称='属性值']

5.伪元素选择器(特殊):

HTML预定义的选择器
格式:标签名:选择器{}
选择器名称为HTML标签的状态.
例如:a:link{}表示链接标签在未访问过时的样式