网站建设概要设计怎么写,免费生成网址,产品怎么进行推广,wordpress删除相似文章文章目录一. CSS介绍二. CSS的引入方式三. CSS选择器一. CSS介绍
定义: 层叠样式表作用: 美化界面: 设置标签文字大小,颜色,字体加粗等样式控制页面布局: 设置浮动,定位等样式 基本语法:
选择器{样式规则
}
样式规则:
属性名1: 属性值1
属性名2: 属性值2
属性名3: 属性值3
..…
文章目录一. CSS介绍二. CSS的引入方式三. CSS选择器一. CSS介绍
定义: 层叠样式表作用: 美化界面: 设置标签文字大小,颜色,字体加粗等样式控制页面布局: 设置浮动,定位等样式 基本语法:
选择器{样式规则
}
样式规则:
属性名1: 属性值1
属性名2: 属性值2
属性名3: 属性值3
...选择器: 在页面中筛选符合规则和要求的标签二. CSS的引入方式
样式表优点缺点使用情况控制范围行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)内嵌样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)
三. CSS选择器
标签选择器
style/* 标签选择器 通过页面标签, 选择满足的标签, 作用范围是页面中所有满足的标签标签{属性: 属性值;} */div{color: red;font-size: 30px;}
/stylebody!-- 多个类使用空格隔开 --div classbox1 blue 好好学习/divdiv classbox2good good study/div
/body类选择器
style/* 类选择器 在定义标签的时候, 可以给标签添加 class 属性, 即类, 一个标签可 置多个类一个类可以作用于多个标签 .类名{属性: 属性值}*/.box1{width: 200px;height: 200px;background: green;}.box2{width: 300px;height: 300px;background: pink;}
/stylebody!-- 多个类使用空格隔开 --div classbox1 blue 好好学习/divdiv classbox2good good study/div
/body层级选择器
style/* 层级选择器, 一般用在标签嵌套当中 选择器1 选择器2 {属性: 属性值;}*/div p{background: palegreen;}div .c_p{width: 200px;} .box1 .c_p{height: 100px;}.box1 p{color: #0000ff;}
/stylebodydiv classbox1这是 div 标签p classc_p这是 p 标签好好学习/p/div
/bodyID选择器
style/* ID选择器, 在一个页面中, 标签的 ID 是唯一的, 所以ID选择器只能作用一个标签#id值 {属性: 属性值;} */#box1{background: red;}
/stylebodydiv idbox1这是一个div/divdiv好好学习/div
/body组选择器
style/* 组选择器, 使用不同的选择器进行组合, 设置相同的属性选择器1, 选择器2{属性: 属性值;}*/div, p{color: bisque;font-size: 30px;}
/stylebodydiv idbox1 classbox1这是一个div/divdiv classbox2好好学习/divdiv classbox3good good study/divp这是一个p标签/p
/body伪类选择器
style/* 伪类选择器, 主要用来做交互效果选择器:事件{属性: 属性值;} */div{width: 100px;height: 50px;background: peru;}/* hover 鼠标指针放到指定选择器后, 就会执行伪类选择器的修改操作 */div:hover{font-size: 30px;color: aqua;}
/stylebodydiv 好好学习/div
/body
