CSS之基本概念篇
lcyangcss 2020-06-07
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