对CSS的初步介绍

1.什么是css？

层叠样式表，就是修饰、渲染、美化网页的一门语言。

2.引入css的3种方式

(1)通过标签上的style属性
<div style=" width:200px;  ... ">xxx</div>
通过style属性为当前标签设置css样式。由于这种方式：
a)无法实现代码的复用
b)容易造成页面结构的混乱
c)很难实现css代码和html代码的分离

(2)通过head标签内部的style标签
这种方式是将所有的css代码集中在一个style标签内部统一管理,初步的实现了将css代码和html代码的分离。也实现了代码的复用。

(3)通过link标签引入外部的css文件
可以将所有的css代码写在一个css文件中，在需要这些代码的html文件中，直接通过link标签引入这个css文件即可.
<link rel="stylesheet" href="css文件的路径"/>
真正的实现了将css代码和html代码的分离。也实现了代码的复用。

3.css的选择器

(1)标签名选择器
div{  } -- 选中所有的div元素并设置样式
span{  } -- 选中所有的span元素并设置样式
(2)类选择器
.c1{  } -- 选中所有class值为c1的元素并为这些元素设置样式
<div class="c1 c2"></div>
<span class="c1"></span>
<p class="c1"></p>

一个标签可以设置多个class属性值(class="c1 c2"),多个class值之间用空格隔开
表示当前标签同时属于多个分组,多个分组设置的样式也会同时作用在这个标签上.
如果是同一级选择器, 为相同的元素设置相同的样式,但是值不相同,此时会使用哪个选择器设置的样式?
写在后面的选择器代码会覆盖前面的选择器代码
优先级: id选择器>class选择器>元素名选择器

(3)id选择器
#div1{ } -- 选中id值为div1的元素
<div id="div1"></div>

(4)后代选择器
span{ } -- 选中当前html中的所有span元素
div span{ } -- 选中div内部的所有span元素
div,span{ } -- 选中当前html中的所有的div元素以及所有的span元素

<div>
<span></span>
</div>
<span></span>
(5)属性选择器 -- 根据元素的属性条件筛选/过滤元素
input[type='text']{ } -- 选中所有type='text'的input元素,也就是文本输入框
input[type='checkbox']{ } -- 选中所有type='checkbox'的input元素,也就是复选框
input[type='radio']{ } -- 选中所有type='checkbox'的input元素,也就是单选框

4.复合选择器

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	逗号 .nav，.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	a{} 和a:hover
：focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus

 

 

 

 

 

 

 

 

 

 

 

5.字体和文本样式

字体样式

属性名	样式	属性值
font-size	字体大小	数字+px
font-weight	字体粗细	正常：normal或者400；加粗：bold或者700
font-style	是否倾斜	正常：normal; 倾斜：italic
font-family	字体系列	sans-serif(无衬线字体）；serif(衬线字体）；monospace（等宽字体）
font	字体连写	style weight size family

 

 

 

 

 

 

 

 

 

文本样式

属性名	样式	属性值
text-indent	文本缩进	数字+px;数字+em(1em=当前标签的font-size的大小）
text-align	对齐方式	left:左对齐；center：居中对齐；right:右对齐
text-decoration	文本修饰	underline:下划线；line-through:删除线；overline:上划线；none:无装饰线
line-height	文本行高	数字+px;

 

 

 

 

 

 

 

 

 

6.背景相关属性

（1）背景颜色  属性名：background-color

属性值

颜色取值	示例
关键字	red、green、yellow等
rgb表示法	rgb(255,255,255)
rgba表示法	rgba(255,255,255,1)
十六进制	#fffff

 

 

 

 

 

 

 

(2)背景图片  属性名：background-image

属性值：background-image:url('图片的路径')

(3)背景平铺  属性名：background-respect

属性值

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿水平方向（x轴）平铺
repeat-y	沿垂直方向（y轴）平铺

 

 

 

 

 

 

 

（4）背景位置 属性名：background-position

属性值：background-position:水平方向位置、垂直方向位置