淄博市建设工程质量协会网站,西宁高端网站制作公司,亚马逊网站入口,代理公司韩剧在线观看免费CSS选择器#xff1a; 根据不同的需求选出不同的标签#xff0c;进行美化装饰 1. 标签选择器 标签选择器(元素选择器)#xff1a;用 HTML标签名作为选择器#xff0c;按标签名称进行分类#xff0c;为页面某一类标签指定统一的CSS样式 作用: 可以把某一类标签全部选中 根据不同的需求选出不同的标签进行美化装饰 1. 标签选择器 标签选择器(元素选择器)用 HTML标签名作为选择器按标签名称进行分类为页面某一类标签指定统一的CSS样式 作用: 可以把某一类标签全部选中进行css美化 优点能够快速的为页面中 同类型的 统一设置CSS样式 缺点不能差异化美化标签 语法
标签名 {属性1: 属性值1 属性2: 属性值2 属性3: 属性值3 ...
}举个栗子
style
/* 给所有p标签内容设置黄颜色给所有div标签内容设置蓝颜色 */p {color: yellow ;}div {color: blue;}/style类选择器class(SSS) 类选择器 需要以class属性来定义它的CSS样式 口诀 类选择器口诀 样式点定义结构类调用一个或多个开发最常用 注 类名可以由数字字母下划线中划线组成一个标签可以有多个类名类名之间以空格隔开以个类选择器可以选择多个标签类名可以重复 语法
.类名 {属性1: 属性值1
属性2: 属性值2...
}举个栗子
!-- 给所有class名叫rd的标签设置其内容为红色....... --
style.rd {color: red;}.yw {color: yellow;}.be {color:blue ;}.pk {color: pink;}/style/head
bodydiv classrd我是div标签,我的calss是红色/div
div classyw我是div标签,我的class是黄色/div
div classbe我是div标签,我的class是蓝色/div
div classpk我是div标签,我的class是粉色/div
p classbe 我虽然是p标签,但我的class也是蓝色/p/body多类名选择器(SSS) 给一个标签设置多个类名从而这些类名都能选中该标签 注 1.也是为了简写css代码相同属性用一个类名封装调用修饰一群鸟可以造出他们共有的属性再根据不同的鸟调用不同的类选择器 语法
在标签class属性内写多个类名多个类名中间用空格隔开
div classred font20亚瑟/div举个栗子 style.red {color: red;}.blue {color: blue;}.font_20 {font-size: 20px;}.font_40 {font-size: 40px;}/style/headbody!-- 定义多个class类名将redfont_40修饰第一个div内容 --!-- 定义多个class类名将bluefont_20修饰第二个div内容 --div class red font_40 周星驰 /divdiv class blue font_40 发哥 /div/body举个栗子改前
!--以下代码 只使用类选择器冗余重复属性的应封装调用节省资源 --style.red {width: 100px;height: 100px;/* 背景颜色 */background-color: red;}.blue {width: 100px;height: 100px;/* 背景颜色 */background-color: blue;}/style/headbodydiv classred红色/divdiv classblue蓝色/divdiv classred红色/div/body举个栗子改后
!--以下代码 只使用类选择器冗余重复属性的应封装调用节省资源 --
style.box {width: 100px;height: 100px;
}.red {/* 背景颜色 */background-color: red;}.blue {/* 背景颜色 */background-color: blue;}/style/headbodydiv classred box红色/divdiv classblue box蓝色/divdiv classred box红色/div/body注意
各个类名之间用空格隔开多类名选择器比较节省CSS代码
