CSS之基本概念篇
OXO1 写在前面
1.HTML和CSS的对比
(1)HTML只关注语义和结构,主要是对网页元素的整理和分类。
(2)CSS的主要使用场景就是美化页面,布局页面。
(3)CSS和HTML搭配使用,实现网页结构,表现分离。
2.CSS概述
(1)概念
CSS是叠层样式表(Cascading Style Sheets)也称为CSS样式表或级联样式表。
也是一种标记语言。
(2)作用
CSS主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等),图片的外形(宽高,边框样式,边距等)以及版面布局和外观显示样式。
(3)CSS语法
CSS主要是由选择器和一条或者多条申明组成。
选择器 { 属性1: 值1; 属性2: 值2; 属性n: 值n; }
demo:
p { color: red; font-size: 12px; }
注:
选择器:指定修改样式的目标
声明: 要改成的样式
(4)CSS注释:
/* 我是被注释掉的内容 */
OXO2 选择器的分类
一. 基础选择器
1.标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按照标签分类,为页面中某一类型的标签,指定统一的CSS样式。
语法 :
标签名 { 属性1: 值1; 属性2: 值2; .... }
demo :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css标签选择器</title> <style> h1 { color: blueviolet; } h2 { color: red; } h3 { color: yellow; } </style> </head> <body> <h1>我是标题1,我用了css样式</h1> <h2>我是标题2,我用了css样式</h2> <h3>我是标题3,我用了css样式</h3> </body> </html>
效果
2.类选择器
使用类选择器可以实现为不同的标签差异化样式。
语法:
/*定义*/ .类名 { 属性1: 值1 属性2: 值2 .... } /*调用*/ <div class=‘类名‘> xxxx </div>
类选择器口诀:
样式点定义 class来调用 一个或多个 开发最常用
注意:
长名称或者词组可以使用中横线连接来为类选择器命名。
demo:
<style> .blueviolet { background-color: blueviolet; } .color { color: cyan; } .box { font-size: 35px; } </style> </head> <body> <div class="blueviolet color box">吵过,闹过,疯狂过,却从来没有后悔过,我们越来越笃定地相信,天长地久也不久。</div> 可以一次调用多个选择器,中间用空格分开。
3.ID选择器
语法
/*定义*/ #id名 { 属性: 属性值; } /*调用*/ <div id="id名"></div>
口诀
#号来定义 id来定义
注意点:
ID选择器一次只能调用一个 一个ID选择器只能调用一次
demo:
<style> #box { font-size: 35px; } </style> <body> <div id="box">第一次调用</div> </body>
4.通配符选择器
语法
* { 属性:属性值; }
注意点
通配符不需要调用,自动的就给所有的元素使用。
二.复合选择器
1.后代选择器(包含选择器)
语法 :
元素1 元素2 { 样式声明 } /*eg :*/ ul li { 样式申明 }
注释:
元素2必须是元素1的后代元素。 后代选择武器是对**后代元素**起作用
demo :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css标签选择器</title> /*父级元素*/ <style> .title { background-color: azure; } .title h1 { color: pink; } .title h1 em { color:aqua; } </style> </head> <body> <div class="title"> <h1>我是div-title的后代,我为pink色<em>我是em,我是我h1的后代,我为aqua色</em></h1> </div> </body> </html>
效果
2.子选择器
子选择器只能作为某元素的最近一级后代元素(子元素)。
元素1>元素2 { 样式声明 }
3.并集选择器
并集选择器可以选择多组标签,同时定义样式。
.选择器1, .选择器2 ... , { 样式声明}
4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,或者选择第一或者第n个元素。例如:链接伪类,结构伪类等。
(1)链接伪类选择器
a:link /*选择所有未被访问的链接*/ a:visited /* 选择所有已被访问的链接 */ a:hover /*选择鼠标指针位于其上的链接*/ a:active /*选择活动链接(鼠标按下未谈起*/
注意点:
1.链接伪类标签的顺序(lvha) :a:link a:visited a:hover a:active 2.a标签在浏览器中有默认的样式,需要根据需求更改样式。
(2):focus
伪类选择器
:focus
伪类选择器用于选取获得焦点(光标)的表单元素。
语法 :
input:focus{ 属性: 属性值; }
(3)结构伪类选择器(css3)
x :first-child /*选取父元素的首个子元素的指定选择器*/ x :last-child /*选取父元素的最后一个子元素的制定选择器*/ x :nth-child(n) /*匹配属于父元素的第N个子元素,不论元素的类型*/ x :nth-last-child(n) /*匹配从父元素最后一个子元素开始倒数的子元素*/
demo :
<style> li:first-child{ /*选择第一个子元素*/ color: red; } li:last-child{ /*选择最后一个子元素*/ color: blue; } li:nth-child(3){/*选择第三个子元素 n 代表第几个的意思*/ color: orange; } </style> </head> <body> <ul> <li>第一个子元素</li> <li>第二个子元素</li> <li>第三个子元素</li> <li>第四个子元素</li> <li>第五个子元素</li> <li>第六个子元素</li> <li>第七个子元素</li> </ul> </body>
效果
OXO3 CSS引入方式
1.内部样式表(嵌入式)
嵌入式样式表指的是把css写在HTML页面中,但是css是单独抽取出来放在<style>
标签中。
语法 :
<style> div { 属性: 属性值; } </style>
2.行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定css样式。
语法:
<div style="属性: 属性值;"> 键盘敲烂,去拾破烂</div>
3.外部样式(链接式)
方式一
<link> rel="stylesheet" href="css文件路径”>
方式二
<style type="text/css"> @import url("css/style.css"); </style>
注<link>
属于HTML而@import
属于CSS<link>
的加载速度比@import
快
OXO4CSS的三大特性
1.层叠性
两个或者多个相同选择器设置了相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。
层叠性原则:
样式冲突 : 遵循的原则是就近原则,哪个样式离结构近,就执行那个。 样式不冲突 :不会层叠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ color: red; /*样式产生冲突,会被层叠掉*/ font-size: 40px; } div { color:skyblue; /*样式产生冲突,层叠掉前面的red*/ } </style> </head> <body> <div> 长江后浪退前浪,前浪死在沙滩上。 </div> </body> </html>
2.继承性
子标签会继承父标签的某些样式。
**demo : **
<style> div { color: red; font-size: 18px; } <div> <p>我是div的子标签,我可以继承父标签的属性</p> </div> </style>
注释:
合理的使用继承可以简约代码
可以继承的属性有:text-, font , line- 这些元素开头以及color属性。
注:
关于继承的详情,请参照这位大佬的博客
3.优先级
当一个元素指向多个选择器,但是选择器定义的样式是同一个的时候,就会有优先级的产生。
注 :
选择器相同,则执行层叠性。
选择器不同,则根据选择器权重执行。
优先级权重
选择器 | 选择器权重 |
---|---|
继承 或 * | 0.0.0.0 |
元素选择器 | 0.0.0.1 |
类选择器 伪类选择器 | 0.0.1.0 |
ID选择器 | 0.1.0.0 |
行内样式 style="" | 1.0.0.0 |
important | 无穷大 |
注意点:
1.继承的权重为0,,不管父级元素权重有多高,子元素的权重都是0。
2.从左到右开始比较,相同位,比较下一位。
3.复合选择器会产生权重叠加 ,但是不会产生进位。
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css标签选择器</title> <style> /*标签选择器的权重为0.0.0.1*/ li { color: red;} /*两个标签选择器的权重之和为0.0.0.2*/ ul li { color: blue; } </style> </head> <body> <ul> <li>111</li> <li>11</li> <li>222</li> <li>eef</li> </ul> </body> </html>
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT