css简介
css是层叠样式表的简称,css主要用于设置html的文本内容、图像的外形以及版式的布局和外观显示样式。css让我们的网页更加丰富多彩,布局更加灵活自如。
css语法规范
css规则由两个主要部分构成:选择器以及一条或多条声明
h1 { color:red; font-size:25px; }
选择器 声明1 声明2
选择器是用来指定css样式的html标签,花括号内是该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性,例如文字大小、文本颜色等属性和属性值之间用英文“;”分开
空格规范
1.属性值前面,冒号后面,保留一个空格
2.选择器(标签)和大括号中间保留空格
基础选择器-标签选择器
标签选择器是指用html标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的css的样式
作用:标签选择器可以把某一类标签全部选择出来,能快速为页面中同类型的标签统一设置样式,但不能设计差异化样式,只能选择全部的当前标签
<style>p {color: red;font-size: 12px;}div {color: blueviolet;}</style><body><p>张小梦很厉害</p><p>呵呵哈哈哈</p><div>嘻嘻嘻嘻</div><div>嘻嘻嘻嘻</div></body>
p 标签选择器选择p标签里面的全部内容 div标签选择器选择div标签里面的全部内容变换样式
基础选择器-类选择器
如果想要差异化选择不同的标签,单独选择一个或者某几个标签,可以使用类选择器
结构需要class属性来调用
<style>.red {color: red;font-size: 20px;}</style><body><p class="red">张小梦很厉害</p><p>呵呵哈哈哈</p><div class="red">嘻嘻嘻嘻</div><div>嘻嘻嘻嘻</div></body>
类选择器能够让想变样式的标签变换样式 用class="类名"来调用类选择器
用类选择器制作一个盒子
<style>.red {width: 100px;height: 100px;background-color: red;}.green {width: 100px;height: 100px;background-color: aqua;}</style><body><div class="red"></div><div class="green"></div><div class="red"></div></body>
类选择器-多类名
多类名使用方式
<style>.red {background-color: red;}.green {background-color: aqua;}.box {width: 100px;height: 100px;}</style><body><div class="red box"></div><div class="green box"></div><div class="red box"></div></body>
效果和上面的盒子一样只是变换了类选择器 让公共的样式在一个类选择器里面,其他的背景单独放一个类选择器(这些标签都可以调用这个公共的类,然后再调用自己独有的类)
基础选择器-id选择器
id选择器可以为特定id的html元素指定特定的样式
html元素以id属性来设置id选择器,css中id选择器以“#”来定义
注意: id属性只能在每个html文档中出现一次
<style>#red {color: red;}</style><body><p id="red">哈哈哈哈</p><p>嘻嘻嘻</p></body>
基础选择器-通配符选择器
在css中,通配符选择器使用“*”定义,它表示选取页面中所有元素
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况如清除所有的元素标签的内外边距会使用