样式简介：
样式-CSScss用户渲染HTML元素标签的样式，CSS是在HTML 4 开始使用，是为了更好的渲染HTML元素而引入的，CSS可以通过一下三种方式添加到HTML中：
- 内联样式 ： 内联样式又叫内部样式，在HTML元素中使用
style属性- 内部样式表 ： 在HTML文件头部
区域中使用元素来包含CSS。- 外部引用 ： 使用外部CSS文件。
推荐： 推荐使用外部引用文件 推荐使用外部引用 c s s 文件 推荐使用外部引用文件\color{#ff0000}{ 推荐使用外部引用css文件} 推荐使用外部引用文件推荐使用外部引用css文件，使用外部连接的优势在于方便二次开发，方便后期维护。为了方便介绍，我们后续文档中使用内部样式，方便介绍案例。
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>01-常用标签title>
<style>
/* 内部样式 */
a {
display: block;
height: 50px;
line-height: 50px;
background-color: #555;
color: red;
text-decoration: none;
}
style>
<link rel="stylesheet" href="style.css">
head>
<body>
<a href="#" style="color:blue;">相对路径 基于当前文件a>
<a href="#">相对路径 基于当前文件a>
<a href="#">相对路径 基于当前文件a>
body>
html>
选择器：
id和class选择器如果html中需要设置css 需要在元素中设置id或class选择器。
标签名：{样式}
class类名 起始标签内部设置属性class=“名称” 样式写法：.class类名{样式表} 不同元素之间的类名名称是可以相同的，不具有唯一性
id名 起始标签内部设置属性id=“名称” 样式写法：#id名{样式表} 在同一个 中名称不可以相同 D O M 中 i d 名称不可以相同 中名称不可以相同\color{#FF0000}{DOM中id名称不可以相同} 中名称不可以相同DOM中id名称不可以相同，具备唯一性。
选择器取名规范：
注意事项
- 不能是拼音
- 不能单独某一个英文字母
- 不能使用单独的数字
- 不能以数字开头
- 不能出现汉字
- 禁止广告类命名,包括英文单词广告
- 下划线是不能使用的 _
规范取名
- 英文单词,见名知意
- 连字符- , cls-title
- 数字结尾 title1
扩展
html + css没有大小写区分，大写和小写都不会有影响，
javascript严格区分大小写案例
比如同一个样式在不同语音中使用： 背景颜色：css代码：background-color,js代码：backgroundColor
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>03-选择器title>
<style>
/* 标签选择器 */
p {
color: aqua;
font-size: 50px;
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
/* id选择器 */
#id-txt {
background-color: yellowgreen;
font-size: 50px;
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
/* class 选择器 */
.class-txt {
background-color: pink;
font-size: 50px;
text-align: center;
}
style>
head>
<body>
<p>这个是标签选择器的样式p>
<p id="id-txt">这个是ID选择器的样式p>
<p class="class-txt">这个是class选择器的样式p>
body>
html>
后代选择器：
由外到内 一层一层的写 中间空格隔开
dev ul li{....}子元素选择器:
> 选中的是此标签的儿子级别元素,选不到子元素后面的后代元素
dev > ul > li{...}相邻元素选择器:
+ 代码解析是从第一个 ,样式展示是从第二个
dev ul li + li{...}兄弟元素选择器:
~ 只能选择同级别后面的制定元素(相同标签名 类名…)
dev ul ~ .cls-name{....}
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-educationtitle>
<style>
.wrap {
border: 1px solid pink;
}
/* 后代选择器： */
.wrap ul li {
color: pink;
}
/* 子元素选择器 */
.wrap1 {
border: 1px solid red;
}
.wrap1>ul>li {
color: red;
}
/* 相邻元素选择器 */
.wrap2 {
border: 1px solid blue;
}
.wrap2 ul+p {
color: blue;
}
/* 兄弟元素选择器 */
.wrap3 {
border: 1px solid aqua;
}
.wrap3 ul~p {
color: aqua;
}
style>
head>
<body>
<div class="wrap">
<ul>
<li>后代选择器li>
<li>后代选择器li>
<li>后代选择器li>
ul>
div>
<hr>
<div class="wrap1">
<ul>
<li>子元素选择器li>
<li>子元素选择器li>
<li>子元素选择器li>
ul>
div>
<hr>
<div class="wrap2">
<ul>
<li>相邻元素选择器li>
ul>
<p>相邻元素选择器p>
<p>相邻元素选择器p>
div>
<hr>
<div class="wrap3">
<ul>
<li>兄弟元素选择器li>
ul>
<p>兄弟元素选择器p>
<p>兄弟元素选择器p>
div>
body>
html>
- 选择器优先级:
- 单个选择器比较: ID名选择器 > class类名选择器 > 标签名选择器
- 组合选择器
- 同类型选择器,个数越多优先级越大
- 出现class类名选择器,只能去比较class类名选择器个数,不受标签名选择器个数影响
- 出现ID名选择器,只能比较id选择器的个数,不受类名选择器和标签选择器影响
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-educationtitle>
<style>
#txt {
color: red;
}
.tit1 .tit2 li p .name {
color: blue;
}
#txt1 .name {
color: green;
}
style>
head>
<body>
<div class="tit1">
<ul class="tit2">
<li>
<p>
<span class="name" id="txt">选择器优先级span>
p>
li>
ul>
div>
<div class="tit1" id="txt1">
<ul class="tit2">
<li>
<p>
<span class="name" id="txt">选择器优先级span>
p>
li>
ul>
div>
body>
html>
优先级
- 当标签中属性满足多个样式属性时生效的样式优先级，被覆盖的样式将不会生效
- 行内样式 > 内部样式
- 行内样式 > 外部样式
- 外部样式 = 内部样式 导入时谁的样式在前谁被覆盖 后面覆盖前面 后面覆盖前面 后面覆盖前面\color{#0000ff}{后面覆盖前面} 后面覆盖前面后面覆盖前面
style.css
.cls-txt{
color:blue;
}
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-educationtitle>
<style>
.name {
color: red;
}
style>
<link rel="stylesheet" type="text/css" href="style.css">
head>
<body>
<p class="name" style="color: blue;">行内样式 > 内部样式p>
<p class="txt" style="color: blue;">行内样式 > 外部样式p>
<p class="txt name"> 外部样式 = 内部样式 导入时谁在后面就会覆盖前面的p>
body>
html>
权重
- 选择器的最终目的就是精确选择元素，最好的方法就是选择器组合写法：组合写法的方法能够准确的选中元素。选择器组合写法：后代选择器，内嵌关系，右外到内两两之间用空格隔开。例如：div ul li{…}
- 标签选择器权重 < class选择器权重 < ID选择器权重
注意：
- 每个选择器都有对应的权重，权重值越大，优先级越高。优先级高的选择器样式会覆盖掉优先级低的选择器的样式；
- 当权重相同的时候，遵循就近原则，哪个选择器最后定义，就采用哪个选择器的样式；
- 相同属性中带有!important的优先级最高；（!important的作用：可以提高权重和优先级）；
- 继承的优先级最低，字体的继承都可以继承，颜色（color）的继承除了超链接（a）以外都可以继承。当元素自身设置相同的属性，就可以把继承的样式给覆盖掉；
- 继承的概念：在父元素上设置的某些属性在子元素上可以起作用；
- 继承的作用：a.可以解决为什么元素没有设置样式，但是样式发生了改变的问题；
- 属性都可以继承
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-educationtitle>
<style>
/* 标签选择器 */
p {
color: red;
}
/* class 选择器 */
.txt {
color: pink;
}
/* id 选择器 */
#txt {
color: blue;
}
style>
head>
<body>
<p id="txt" class="txt">选择器权重测试p>
body>
html>