900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 6—CSS基础选择器(标签选择器 类选择器 id选择器)

6—CSS基础选择器(标签选择器 类选择器 id选择器)

时间:2021-03-06 06:04:01

相关推荐

6—CSS基础选择器(标签选择器 类选择器 id选择器)

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中,通配符选择器使用“*”定义,它表示选取页面中所有元素

通配符选择器不需要调用,自动就给所有的元素使用样式

特殊情况如清除所有的元素标签的内外边距会使用

基础选择器总结

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。