JavaWeb——CSS_总结

来源：互联网发布：linux get_sb 编辑：程序博客网时间：2024/06/07 17:37

一、 CSS概述

1、CSS是什么？

* CSS 指层叠样式表

样式表：存储样式的地方

层叠：一层叠一层

2、CSS有什么作用？

*CSS就是用来更好地修饰HTML

3、CSS代码规范

选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用分号隔开

属性与属性值直接按用冒号连接

如果一个属性有多个值的话，那么多个值用空格隔开。例如： border:5px solid red;

注释：/* 注释内容*/

二、CSS选择器

*CSS选择器：指定了CSS样式作用于哪个HTML标签上

1、元素选择器

*就是把HTML标签名作为选择器名称

*格式：标签名 {}

2、类选择器

*样式格式： .class名{}

*标签格式： <p class=”class名”></p>

*能设置不同标签的相同样式

如果想将一组元素设定为相同的样式，可为它们设置相同的class属性值，再通过CSS类选择器指定相同的样式

3、Id选择器

*样式格式： #id名{}

*标签格式：<p id=”id名”></p>

*有针对性地设置样式

4、属性选择器

*根据标签名和标签的属性名以及属性值来选择

*样式格式：标签名[属性名称=’属性值’]

5、伪元素选择器

*HTML预定义的选择器

*格式：标签名:选择器{}

*选择器名称为 HTML标签的状态。例如：a:link{}表示链接标签在未访问过时的样式。

三、HTML与CSS的结合方式

*CSS必须结合HTML来用。

*4种使用方式：

1、style属性方式（内联样式）

*适合局部修改

*<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>标签中

4、链接方式（外部样式最常用的方式）

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

*存在于<head>标签中

外部样式好处：

提升了代码的复用性，更加易于维护，从而极大提高工作效率

样式优先级：

内联样式》》内嵌样式==外部样式（链接方式）（就近原则）

1、如果加入导入方式会有截断CSS代码的风险

2、 !important

链接方式和导入方式区别：

1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载，在网速较慢时会出现网页没有样式的情况。（导入方式硬伤）

2、链接方式支持JavaScript修改样式，而导入方式不支持（导入方式硬伤）

3、链接方式可以引入样式也可以做其他事情。而导入方式只能引CSS

4、链接方式导入的CSS任何浏览器都OK，而导入方式要求浏览器版本必须在IE5以上

建议使用链接方式

0 0