目 录CONTENT

文章目录

CSS基础

Administrator
2020-07-24 / 0 评论 / 2 点赞 / 7337 阅读 / 19973 字

CSS基础

在Web的标准里面,我们把它分为“结构”,“表现”,“行为”。这三者相互分离,又相互约束

Web标准HTML结构CSS表现JavaScript行为

结构:网页上面显示什么内容,有什么东西,这就是网页的结构。而网上面的到底有什么东西则是由HTML决定的

表现:这个内容在页面上面怎么显示,显示成什么样子,这是由CSS决定的。所以表现形式是控制结构的样式的,综合所说就是CSS来控制HTML的样式

行为:指的是用户与网页之间的一系列操作

在上面的三个部分里面,它们三者各司其职,各有所长。如果我们想通过 HTML标签去控制HTML的样式 ,这样非常麻烦(因为这并不是它的专长,HTML主要负责的是网页的结构,不是网页的样式)


在之前的HTML的练习里面,我们发现几个很重要的点

  1. HTML标签如果去做样式 ,非常麻烦,要很多代码
  2. HTML标签如果去做样式 ,非常不统一,有些标签有的属性,其它标签又没有
  3. 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>

image-20200520112620169

两个选择器之间使用空格来进行隔开,就代表后面一个选择器是前面一个选择器的后代,空格两边的选择器类型没有必要做限制,可以是我们之前所学过的所有类型选择器

.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" >

现有如上做对,请按要求完成操作

  1. 将所有以.png格式结尾的图片宽度设置为100px

    [src $= ".png"]{
        width: 100px;
    }
    

    属性值结束匹配使用$=

  2. 请将所有img目录下面的图片的高度设置为80px

    /* 属性值开始匹配 */
    [src ^= "img"] {
        height: 80px;
    }
    

    属性值开始匹配使用^=

  3. 请将图片中名子包含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>

image-20200520144555210

相邻兄弟选择器其实还有一些小技巧的使用,我们看下面代码

<style type="text/css">
    .ul1>li+li{
        color: red;
    }
</style>
<ul class="ul1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
</ul>

这个时候我们会看到除了第一项以外,其实的项都被设置成了红色

image-20200520145659256

我们经常会使用这样的方式去排除第一个子元素(通过像这样的规律,我们还排除前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>
2

评论区