Web基础——CSS简介

最新推荐文章于 2024-08-02 18:01:26 发布

带着我捉泥鳅～

最新推荐文章于 2024-08-02 18:01:26 发布

阅读量565

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45318246/article/details/107627576

版权

CSS基础（一）

（一）CSS简介

汉译为层叠样式表,是用于控制网页样式；
WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制；
目前推荐遵循的是W3C发布的CSS3.0版本；

（二）DIV+CSS的优点

弥补了html语言的不足；
缩减页面代码，提高访问速度；
代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验就会更好；
结构清晰，有利于SEO（搜索引擎的优化）；
缩短改版时间；
对网站的重构有很好的支持；

（三）CSS的基础语法

选择器{ 属性：属性值；}

（四）CSS的样式表

内联样式（行间样式，行内样式）：

<标签 style="属性1:值1;属性2:值2; ……"> </标签>
内部样式表：
<style type="text/css"> css语句 </style>（写在head中间）
引用外部样式表文件

引用写法
<link href="目标文件路径" rel="stylesheet" type="text/css" />

导入写法
<style type="text/css"> @import url("目标文件的路径及文件名全称"); </style>

注意：link和@import导入外部样式的区别

①link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等，@import只能用来导入css；

②link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式；

③@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。

④在控制DOM时，link支持，@import不支持

（五）CSS优先级

内联样式表的优先级别最高；
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
标签选择符的权重为0001；
class选择符的权重为0010；
id选择符的权重为 0100；
内联样式的权重为1000；
继承样式的权重为0000；
群组选择符权重为他本身；
包含选择符的权重为包含选择符的权重之和；

（六）CSS中的选择器

标签选择器

如果想改变某个元素的默认样式时、或者同一文档中某个元素的显示效果时可以使用标记选择符、
类型选择符是根据html语言中的标记来直接定义
语法：标签名称 { 属性：属性值；}
实例： div { width: 30px}

class选择器

.class名称{ 属性：属性值;}
用法：class选择符更适合定义一类样式；
(1)当我们使用类选择符时，应先为每个元素定义一个类名

(2)类选择符的语法格式：

  <div class="top"></div> 
  .top{属性:属性值;}

id选择器

	<div id=“id名”></div>
	#id名{属性：属性值;}

可以给每个元素使用id选择符，但id是元素的唯一标识符，不可出现重复的ID名
起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字) 如：head标记
一个id名称只能在文档中出现一次，因为id是唯一的
最大的用处：创建网页的外围结构。

特殊选择器

伪类选择器

群组选择器（集合选择器）

  语法：选择器1，……，选择器5 {属性：属性值;} 
  说明：当有多个选择器应用相同的样式时，可以将每个选择器用“，”分隔的方式合并为一组。

群组选择符权重为他本身

通配符（*）

  通配选择符的写法是*，其含义就是所有元素；表示该样式适用所有网页元素；
  用法：常用来重置样式。

包含选择器（后代选择器）

  语法：选择器1 选择器2{属性：属性值;} 
  说明：选择器1和选择器2用空格隔开，含义就是选择器1中包含的所有选择器2

包含选择符的权重：为包含选择符的权重之和

伪元素选择器

  a:link {color: #FF0000;} /* 未访问的链接 */
  a:visited {color: #00FF00;} /* 已访问的链接 */
  a:hover {color: #FF00FF;} /* 鼠标移动到链接上 */
  a:active {color: #0000FF;} /* 选定的链接 */