CSS基础
在Web的标准里面，我们把它分为“结构”，“表现”，“行为”。这三者相互分离，又相互约束
结构：网页上面显示什么内容，有什么东西，这就是网页的结构。而网上面的到底有什么东西则是由HTML决定的
表现：这个内容在页面上面怎么显示，显示成什么样子，这是由CSS决定的。所以表现形式是控制结构的样式的，综合所说就是CSS来控制HTML的样式
行为：指的是用户与网页之间的一系列操作
在上面的三个部分里面，它们三者各司其职，各有所长。如果我们想通过 HTML标签去控制HTML的样式 ，这样非常麻烦（因为这并不是它的专长，HTML主要负责的是网页的结构，不是网页的样式）
在之前的HTML的练习里面，我们发现几个很重要的点
- HTML标签如果去做样式 ，非常麻烦，要很多代码
- HTML标签如果去做样式 ，非常不统一，有些标签有的属性，其它标签又没有
- HTML标签如果去做样式 ，仍然有很多样式无实实现
针对像上面这样的问题，W3C就推出了解决方案去解决这个问题，这个解决方案就是推出了一个新的技术，这个技术叫CSS
第一个问题：样式属性不统一
<body text="red">
大家好才是真的好
<hr>
<font color="blue">设置文字颜色</font>
</body>
在上面的代码里面，我们在body标签里面通过 text属性去设置了文字颜色，但是在<font>标签里面，我们又通过color属性去设置了文字的颜色，设置文字颜色的属性竟然不属性
第二个问题：样式代码与结构代码没有分离
<p>
<font color="red" size="7">这是一个红色的文字</font>
</p>
在上面的代码里面，如果我仅仅只是想让这个段落里面的文字变成红色，字体变大，这个时候我竟然要去添加一个标签，这样就破坏了代码的结构（能不能在不添加标签的情况下直接去设置样式呢）
第三个问题：代码繁琐，冗余量大
在之前做家庭作业的时候，我们如果要把每一个tr都设置一个背景颜色，这样我们必须在每个tr标签上面都添加一个bgcolor这一个属性，这样做就很繁琐
针对上面存在的三个问题，W3C就推出了CSS这种技术
CSS：全称叫Cascading Style Sheet中文名称叫层叠样式表
CSS基础特性
1.统一性
针对之前在HTML里面不同的标签有不同的属性这些情况，Web程序员在记标签的时候 ，还需记忆这些不同的样式属性就很麻烦，并且属性名还不统一，所以CSS在这里就推出一个统一的标准，它使用统一的样式属性来设置HTML的样式
- CSS将所有的元素都添加了一个
style属性，以后与样式（表现形式）相关的所有内容全部找style属性，它可以一次性设置好 - 在这个
style属性里面，它有统一的属性名和属性值，针对所有的元素都可以进行设置，这样就避免了之前在HTML里面，某些元素无法设置样式的问题
有了这一个统一性以后，之前在HTML标签里面的那些样式属性，我们都可以不用记了，如
align,color,bgcolor,vspace,valign,hspace,cellspacing,cellpadding,face,size,type等
2.便捷性
所谓的便捷性就是CSS操作起来非常方便。CSS提供了大量的选择器，这些选择器可以批量的或单个的选中页面上面的元素，然后进行相应的样式操作
3.分离性
在网页里面，我们的结构代码是HTML，样式代码是CSS，它们两个应该可以进行相互分离。而在之前的HTML里面它是通过标签来完成的，它们的代码是不可侵害的
当我们把CSS样式单独分离出来以后，其实可以实现一个CSS样式控制多个页面，这样极大的简化了我们的工作量
<p style="color: red;">床前明月光</p>
这个时候的代码与样式结合在了一起，它的语法格式style="属性名:属性值;"
样式代码如果需要和结构代码进行分离，则应该将样式代码写在特定的区域
<style type="text/css">
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
当我们的样式代码过多 的时候，我们也可以将整个<style>标签里面的标签代码直接写到一个新的CSS文件里面去，然后再使用link标签或@import命令导入到网页里面去
<link href="./css/login.css" rel="stylesheet" type="text/css">
href指的是链接CSS的地址rel指的是引用类型为样式表type指的是文件类型是CSS文件
也可以通过命令来进行导入
<style type="text/css">
@import url("./css/login.css");
</style>
CSS选择器
标签选择器
标签选择器以HTML页面上面的某一个标签选依据进行选择
<style>
/* 指代页面上面所有的h2标签 */
h2{
color: blue;
}
/* 指代页面上面所有的p标签 */
p{
color: red;
font-size: 26px;
}
</style>
<body>
<h2>静夜思，李白</h2>
<p>床前明月光</p>
</body>
标签选择器的范围太广
ID选择器
ID是每个HTML元素都具备的一个属性，原则上面是不允许重复的，所以我们可以通过这个特点让CSS只选中每个ID的元素，达到单个（或某个范围选取）
<style type="text/css">
/* id="bbb" */
#bbb{
color: red;
}
</style>
<body>
<h2>李白</h2>
<h2 id="bbb">白居易</h2>
<h2>晏殊</h2>
</body>
class类选择器
这个选择器是我们CSS中使用最多的选择器，它灵活，方便
我们可以把CSS样式当成是一个微信群，把每个元素当成是一个人，人可以加入不到的微信群， 一个微信群里面也有不同的类（物以类聚，人在群分）
<style type="text/css">
.a{
color: red;
}
.b{
font-weight: bold;
}
.c{
font-size: 36px;
}
</style>
<body>
<p class="a">第一项</p>
<p class="c">第二项</p>
<font class="a b">第三项</font>
<p class="b">第四项</p>
</body>
一个样式可以被多个元素使用（一个群可以被多个人加入），一个元素也可以使用多个样式（一个人也可以加入到多个群）。正是因为有了这个特点，所以class类选择器非常非常灵活，我们在开发过程当中会优先使用这一个选择器
后代选择器
后代选择器，我们使用空格来表示
<style type="text/css">
/*div标签的后代a标签*/
div a{
font-size: 36px;
color: red;
}
</style>
<body>
<a href="https://www.iqiyi.com">爱奇异</a>
<div>
<p>
有问题
<a href="https://www.baidu.com">百度一下</a>
</p>
<a href="https://www.softeem.xin:8090">也可以找标哥</a>
</div>
</body>
两个选择器之间使用空格来进行隔开，就代表后面一个选择器是前面一个选择器的后代，空格两边的选择器类型没有必要做限制，可以是我们之前所学过的所有类型选择器
.div1 a{} /*class="div1"下边的a标签*/
#div2 .div1{} /*id="div2"下边的class="div1"元素*/
#div3 p .a1{} /*id="div3"下边的p标签下边的class="a1"的元素*/
子代选择器
子代选择器使用>去完成
<body>
<a href="https://www.iqiyi.com">爱奇异</a>
<div>
<p>
有问题
<a href="https://www.baidu.com">百度一下</a>
</p>
<a href="https://www.softeem.xin:8090">也可以找标哥</a>
</div>
</body>
要求 ：将div下面的子元素a标签设置为红色，字体大小设置为36px
div>a{
font-size: 36px;
color: red;
}
子代选择器使用>来表示 ，选择器的两边也不限定选择器的类型 ，可以是我们之前所学过的所有类型选择器。
同时也要注意某些情况下子代选择器的坑，如table标签的子代标签不是tr，而是tbody
分组选择器
分组选择器可以将多个选择器编成一个分组，使用,进行隔开就可以了
<style type="text/css">
.a {
color: red;
}
.b {
font-size: 32px;
}
.a,.b {
text-decoration: underline;
}
</style>
<p class="a">标哥哥你好</p>
<font class="b">我是你的好朋友</font>
<h2 class="b">我们出去耍一下吧</h2>
分组选择器可以将任何选择器进行分组，逗号左右两边不限定类型
属性选择器
属性选择器使用[]来表示，它依托某一个标签里面的属性来进行选取
<style type="text/css">
/*选中属性type="text"的元素*/
[type="text"] {
width: 300px;
}
/*选中具备value属性的元素*/
[value]{
height: 45px;
}
</style>
<input type="text" placeholder="请输入账号" /><br>
<input type="text" placeholder="请输入昵称" value="标哥哥"><br>
<input type="password" placeholder="请输入密码" value="123">
属性选择器的高级应用
<img src="image/item1.jpg" >
<img src="image/item33.png" >
<img src="img/item3.jpg" >
<img src="img/item4.png" >
现有如上做对，请按要求完成操作
-
将所有以
.png格式结尾的图片宽度设置为100px[src $= ".png"]{ width: 100px; }属性值结束匹配使用
$= -
请将所有
img目录下面的图片的高度设置为80px/* 属性值开始匹配 */ [src ^= "img"] { height: 80px; }属性值开始匹配使用
^= -
请将图片中名子包含3的图片添加一个
border:5px solid red的样式[src *= "3"]{ border: 5px solid red; }属性值任意匹配使用
*=
所有的HTML元素其实都有属性，我们在学习这个属性选择器以后就可以通过它快速的选择页面元素
<style type="text/css">
.box>[class ^="user"] {
font-weight: bold;
}
</style>
<div class="box">
<p class="user-name">标哥哥</p>
<div class="user-age">18</div>
<p class="desc">这是一个说明性的文字</p>
<font class="user-sex">男</font>
<div class="user-address">湖北省武汉市</div>
</div>
相邻兄弟选择器
相邻兄弟选择器使用+来进行表示
<style type="text/css">
/* 请将p标签后面紧挨着的兄弟标签a标签设置为红色 */
p+a{
color: red;
}
/* 请将h2标签后面紧挨着的兄弟标签a标签设置为绿色 */
h2+a{
color: green;
}
</style>
<a href="#">百度一下</a>
<p>第一个</p>
<a href="#">第二个</a>
<h2>第三个</h2>
<a href="#">第四个</a>
<a href="#">第五个</a>
相邻兄弟选择器其实还有一些小技巧的使用，我们看下面代码
<style type="text/css">
.ul1>li+li{
color: red;
}
</style>
<ul class="ul1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
这个时候我们会看到除了第一项以外，其实的项都被设置成了红色
我们经常会使用这样的方式去排除第一个子元素（通过像这样的规律，我们还排除前n项等操作）
普通兄弟选择器
它也是一种兄弟选择器，但是只要是弟弟就可以了，不限定它们是否相相邻，如“老大与老三”也是可以的
普通兄弟选择器使用~表示
<style type="text/css">
/* 请将p标签后面的兄弟标签a标签设置为红色 */
p~a{
color: red;
}
</style>
<a href="#">百度一下</a>
<p>第一个</p>
<a href="#">第二个</a>
<h2>第三个</h2>
<a href="#">第四个</a>
<a href="#">第五个</a>
星号选择器
星号选择器使用*来表示，代表的选中所有的元素进行匹配
*{
margin:0;
padding:0;
}
这样就是把所有元素的margin与padding设置成了0
选择器的并联
将多个选择器并联在一起，提高查找的效果，关于这一块的内容在后面CSS的高级特性【选择器的优先级】这个章节会进行详细讲解
<h2 class="a">床前明月光</h2>
<p class="a">疑是地上霜</p>
<h2 class="a b">举头望明月</h2>
<h2>低头思故乡</h2>
<style>
/* 仅仅只是希望h2标签class="a"怎么选择 */
h2.a{
color: red;
}
/*三个选择器实现的并联的效果*/
h2.a.b{
text-decoration: underline;
}
</style>
评论区