CSS基本操作和使用
介绍:CSS叫做层叠样式表,用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。
一,CSS负责结构、表现、行为中的表现
二,编写的位置:
1.内联样式
将样式编写到标签的style属性中
<p style="color:red;"></p>
这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用
2.内部样式表
将样式表编写到head中的style标签中
<style type="text/css"></style>
使用内部样式表,进一步将表现 和结构分离,可以同时为多个元素设置样式,方便后期的维护
3.外部样式表
将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式
三,基本语法
选择器
通过选择器可以选中页面中的一组元素,然后为其设置样式
元素选择器
根据标签名,选中页面中的指定元素
语法:标签名{ }
例子:
div{}
p{}
h1{}
id选择器
根据元素的id属性值选中一个唯一的元素
语法:#id {}
例子:
#box1{}
#hello{}
类选择器
根据元素的class属性值,选中一组元素
语法:.class{}
例子:
.hello{}
.box{}
通配选择器
选中页面中的所有元素
语法:*{}
通配选择器的性能比较差,尽量避免使用
并集选择器
可以同时选中符合多个选择器的元素
语法:选择器1,选择器2,选择器N{}
例子:
div,p,#box,.hello{}
交集选择器
可以选中满足多个条件的元素
语法:选择器1选择器2选择器N{}
例子:p.hello{}
后代元素选择器
选中指定元素的指定后代元素
语法:祖先元素 后代元素{}
例子:
div span {}
div p{}
子元素选择器
选中指定元素的指定子元素
语法:父元素 > 子元素 {}
例子:
div > span {}
div > p{}
声明块
声明块中实际上就是一个一个CSS声明
每一个CSS声明都是一个样式,实际上就是一个名值对的结构
名和值之间使用:链接
:左边是样式的名字
:右边是样式的值
每一个声明以;结尾
例子:
color:red;
font-size:20px;
元素之间的关系
父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素叫做子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素,父元素也是祖先元素
后代元素
直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素
兄弟元素
拥有相同父元素的元素叫做兄弟元素
块元素和内联元素
块元素
块元素会独占页面中的一行,无论他的内容的多少
一般使用块元素对页面进行布局
常见的块元素
div
p
h1~h6
内联元素
内联元素只占用自身的大小,不会独占一行
内联元素也叫行内元素(inline)
一般内联元素都是用来为文本来设置效果
常见的内联
span
a
img
包裹规则
一般都是使用块元素去包裹内联元素,而不会使用内联去包裹块元素
a元素可以包含任意元素,除了a本身
p元素不能包含任何块元素