CSS基础

最新推荐文章于 2020-02-13 21:59:58 发布

冬男zdn

最新推荐文章于 2020-02-13 21:59:58 发布

阅读量642

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/LikeStudyBoy/article/details/78880856

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

目录
一、CSS简介
二、CSS样式表的建立
三、CSS样式表的优先级
四、CSS语法
五、CSS选择器

一、CSS简介

1.1 css中英文全称
	cascading style sheets 层叠样式表
1.2 css
	web标准中的表现标准语言，是如何修饰网页信息的显示样式
	目前推荐遵循W3C发布的CSS3.0
	用来表现XHTML和XML等样式文件的计算机语言
1.3 div+css的优点
	缩减页面代码，提高访问速度
	结构清晰，有利于seo{搜索引擎优化}
	样式表能实现内容与样式的分离，方便团队开发
	样式复用、方便网站的后期维护

二、CSS样式表的建立

2.1 内部样式表
	内部样式表是嵌套在页面中
	2.1.1 语法
		<style type="text/css">
			css语句
		</style>
		注：使用style标记创建样式时，最好将该标记写在<head></head>之间
2.2 内联样式
	内联样式也叫行内样式，行间样式，嵌入式样式
	2.2.1 语法
		<标签 style=" 属性:属性值; 属性:属性值; "></标签>
		例如：<div style="width:100px; height:100px;"></div>
2.3 外部样式表的建立及调用
	2.3.1 方法一
		<link rel="stylesheet" type="text/css" href="目标文件路径" />
		说明：使用link元素导入外部样式表时，需将该元素写在文档头部，
		即<head>与</head>之间。rel：用于定义文档关联，表示关联样式表；type：定义文档类型；
	2.3.2 方法二
		<style type="text/css">
		@import url(目标文件路径);
		</style>
		说明：@和import之间没有空格，url和小括号之间也没有空格；必须结尾以分号结束。
	2.3.3 link和import的区别
		区别一：归属区别 link属于XHTML标签，而@import完全是css提供的一种方式。
		link除了可以加载css外，还可以做其他事情，比如定义RSS、定义rel连接属性。
		@import只能加载css。
		区别二：加载顺序的区别 当页面被浏览的时候，link的css会同时被加载
		而@import的css要等到页面全部加载完才能被加载。
		所以有时候浏览@import的页面开始时会没有样式。
		区别三：兼容性的差别 @import是css2.1提出的，所以老的浏览器不支持，
		@import只能在IE5以上才能被识别，link无此问题。
		区别四：使用dom控制样式时的差别 使用js控制dom去改变样式的时候，只能使用link，
		因为@import不是dom可以控制的。

三、CSS样式表的优先级

3.1 优先级
	内联样式表的优先级别最高
	内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
	（总而言之，可以这样记，哪个离想要控制的标签近，哪个优先级别高。
	所以内联最高，因为内联就在行内。）

四、CSS语法

4.1 css语法
	4.1.1
		css语法由两部分组成：选择符、声明
		选择符{属性：属性值；属性：属性值；}
		声明包括属性和属性值
	例如：h1{width：100px； height：100px；} h1是选择符 
	width和height及他们的属性值是声明
	4.1.2 说明概括
		每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值
		属性必须放在花括号中，属性与属性值用冒号连接，每条声明用分号结束
		当一个属性有多个属性值的时候，属性值与属性值不分先后顺序
		在书写样式过程中，空格、换行等操作不影响属性显示

五、CSS选择器

5.1 选择符含义
	选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。
5.2 css选择符
	css选择符包括4大类：类型选择符、类选择符、ID选择符和特殊选择符
5.3 常用的选择符有十种左右
	类型选择符（标记、标签、元素）、类选择符（class）、ID选择符（id）、
	包含选择符（父子级）、群组选择符（集合选择器）、通配符（*）、伪类选择符、伪对象选择符
5.4 类型选择符
	5.4.1 语法
		标签{属性：属性值；} 如：div{width：100px；height：100px；}
	5.4.2 说明
		类型选择符就是以文档语言对象类型作为选择符，即使用结构中标签名称作为选择符。
		例如：body、div、p、img、em、strong、span......等等
		所有的页面标签都可以作为选择符
	5.4.3 用法
		如果想改变某个标签的默认样式时，可以使用类型选择符
		当统一文档某个标签的显示效果时，可以使用类型选择符
5.5 类选择符
	5.5.1 语法
		.class名{属性：属性值；} 如：.box{width：100px； height：100px；}
	5.5.2 说明
		当我们使用类选择符时，应该为每个元素定义一个class名，如<div class="box"></div>
	5.5.3 用法
		适合定义一类样式
5.6 id选择符
	5.6.1 语法
		#id名{属性：属性值；} 如：#box{width：100px；height：100px；}
	5.6.2 说明
		当我们使用id选择符时，应该为每个元素定义一个id名，如<div id="box"></div>
		起名时要去英文名，不能用关键字，所有的标签和属性都是关键字，以防冲突。
		一个id名称只能对应文档中一个具体的对象
	5.6.3 用法
		创建网页的外围结构
5.7 包含选择符
	5.7.1 语法
		选择符1 选择符2{属性：属性值；}
		选择符父级 选择符子级{属性：属性值；}
	5.7.2 说明
		选择符1和选择符2之间用空格隔开，含义就是选择符1中包含选择符2
5.8 群组选择符
	5.8.1 语法
		选择符1，选择符2{属性：属性值；} 如：选择符1，选择符2{margin：0 auto；}
	5.8.2 用法
		当有多个选择符应用相同样式时，可以用选择符，用“，”分隔，合并为一组
5.9 通配符（*）
	5.9.1 语法
		*{属性：属性值；} 如：*{margin：0； padding：0；}
	5.9.2 用法
		通配符常用来重置样式
5.10 伪类选择符
	5.10.1 语法
		a:link{属性：属性值;}超链接的初始状态
		a:visited{属性：属性值;}超链接被访问后的状态
		a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态
		a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态
	5.10.2 说明
		当这4个超链接伪类选择符联合使用时，应注意他们的顺序，
		正常顺序为：a:link，a:visited，a:hover，a:active
		顺序乱，会是超链接效果失效
		为了简化代码，可以把伪类选择符中相同的声明合在a中 
		如:a{color:red;} a:hover{color:green;} 意思是只有在鼠标经过是颜色变为绿色
5.11 伪对象选择符（见第九章）、子选择器（见第十章）、属性选择器（见第十二章）
5.12 选择符的权重问题（重点重点重点）
	5.12.1 详解
		css中用四位数字表示权重，权重的表达方式如：0,0,0,0
		内联样式（1000）
		id选择符（100）
		class选择符、属性选择符、伪类选择符和伪对象选择符（10）
		包含选择符（包含的选择符的权重之和）
		类型选择符（1）
		子选择符（0）
	5.12.2 说明
		当不同的选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。 
		如：p.demo的权重是 1+10=11
		相同权重的选择符，样式遵循原则：哪个选择符最后定义，就采用哪个选择符样式。
		（注意是样式中定义该选择符的先后，而不是html中使用先后）
5.13 注释方法
	5.13.1 方法
		html的注释 <!---->
		css的注释 /**/
	5.13.2 好处
		在html和css养成注释的好习惯，在后期维护和更改的时候，可以快速找到自己要找的位置。
		以方便团队开发。