前端基础-CSS样式1. CSS样式常用的三种引用方式:
#CSS样式分为3种: #优先级:行内样式>内嵌样式>外部样式 1.行内样式: <div style="width: 300px;height: 300px;background: green"> </div> 2.内嵌样式 head中间添加样式: <style> div{ width: 200px; height: 200px; background: green; } </style> 3.外部样式 lesson.css样式文件: div { width: 200px; height: 200px; background: green; } #引用方式: <link rel="stylesheet" href="lesson.css"> 扩展:修改页面页签的图标: <link rel="shortcut icon" href="image/test1.ico">
2.选择器
#1.通配符选择器 * { margin: 0; } #2.标签(tagName)选择器 div { width: 100px; height: 100px; background: red; } #3.class选择器,一般给具有相同属性的元素设置同一个class .box { background: blue; } #4.id选择器,id具有唯一性 #box{ background: gray; } #5. +是相邻选择器,操作的对象是该元素后的同级元素,只会针对一个元素 div + p+p { background: blue; } #6.群组选择器,对几个相同熟悉的选择器进行样式设置,div和p都生效 div, p { width: 100px; height: 100px; background: red; } #7. ~ 是兄弟选择器:div后所有同级p元素生效 div ~ p { background: green; } #8.>子代选择器 :div所有子元素p生效,变成蓝色 div > p { background: blue; } #9.后代选择器:可以指定某一层级子元素生效,div的下面所有li元素样式生效 div li { width: 50px; height: 50px; background: red; } #10.伪选择器 #a标签: a:link { /*未被点击的链接*/ color: red; } a:visited { /*已被点击的链接*/ color: green; } a:hover { /*鼠标悬浮的颜色*/ color: aqua; } a:active { /*鼠标按下的颜色*/ color: black; } #div标签: div { width: 100px; height: 100px; background: red; } div:hover { /*改变元素本身*/ /* default 默认箭头 pointer 手指 wait 显示正忙 help 显示帮助 */ cursor: pointer; background: blue; } div:hover p { /*改变元素下面的p标签*/ width: 100px; height: 20px; background: green; } #11.通用选择器的优先级: 选择器优先级: (*)<tagName<(.)class类选择器<(#)id选择器 级别相同的选择器,后面的样式会覆盖前面的 复杂后代选择器: 1.先比id 再比class 再比tagName 2.id选择器个数不相等,id越多,优先级越高 3.id选择器相同,则比class,在比tagName # 快捷键: ul>li*5 + TABL 快捷输出5个li标签
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!