Day31、CSS

最新推荐文章于 2024-11-04 20:33:37 发布

格子衫的快乐

最新推荐文章于 2024-11-04 20:33:37 发布

阅读量289

点赞数

分类专栏： java学习文章标签： java 服务器前端

本文链接：https://blog.csdn.net/qq_72629130/article/details/127025965

版权

java学习专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1、CSS

1、什么是CSS

1）Cascading Style Sheet 级联样式表

2）表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

1.2、CSS的优势

1）内容与表现分离

2）网页的表现统一，容易修改

3）丰富的样式，使得页面布局更加灵活

4）减少网页的代码量，增加网页的浏览速度，节省网络带宽

5）运用独立于页面的CSS，有利于网页被搜索引擎收录

1.3、CSS的基本语法

1.3.1、CSS基本语法结构

选择器 { 声明1;
              声明2;
              ……  }

注意： CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

1.3.2、style标签

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

1.4、HTML中引入CSS样式

1.4.1、行内样式

1）使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

1.4.2、内部样式表

1）CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

2）优点：方便在同页面中修改样式

3）缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

1.4.3、外部样式表

1）CSS代码保存在扩展名为.css的样式表中

2）HTML文件引用扩展名为.css的样式表，有两种方式

链接式导入式

3）链接外部样式表

4）导入外部样式表

1.4.4、链接式与导入式的区别

1）<link/>标签属于XHTML，@import是属于CSS2.1

2）使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

3）使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

4）@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

1.4.5、CSS样式优先级

1）行内样式>内部样式表>外部样式表

2）就近原则

2、CSS选择器

2.1、CSS基本选择器

2.1.1、标签选择器

1）HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>

2.1.2、类选择器

2.1.3、ID选择器

2.1.4、基本选择器的优先级

1）ID选择器>类选择器>标签选择器

2）不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

2.2、CSS的高级选择器

2.2.1、层次选择器

1）后代选择器

注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

2）子选择器

3）相邻兄弟选择器

4）通用兄弟选择器

2.2.2、属性选择器

1） E[attr]属性选择器

2） E[attr=val]属性选择器

注意： E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

3）E[attr*=val]属性选择器

4） E[attr^=val]属性选择器

5） E[attr$=val]属性选择器

2.3、字体样式

2.4、文本属性

3、超链接

3.1、使用CSS设置超链接

设置伪类的顺序：a:link->a:visited->a:hover->a:active

3.2、列表样式

list-style-type list-style-image list-style-position list-style