CSS的简单学习

wqksoul

已于 2022-11-18 20:46:19 修改

阅读量93

点赞数

文章标签： html

于 2022-11-18 20:41:21 首次发布

本文链接：https://blog.csdn.net/wqksoul/article/details/127929124

版权

01CSS的简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        网页三部分
        html    结构    30个左右标签，先用一段时间
        css     表现    外在显示的样子
        js      行为


        html    超文本语言
        css     -层叠样式表
                -网页是一个多层的结构，css可以给每一层结构做样式
                最终你看的是最上面的一层
     -->
</body>
</html>

02CSS的书写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p{
            color: blue;
            font-size: 50px;
            background-color: crimson;
        }
    </style>
 
    <link rel="stylesheet" href="./02.css书写位置.css">
</head>
<body>

     <div style="color: yellow; font-size: 32px; background-color: green">德韩极老尚啦安救是航中，知才陛，太后太。</div>
     <div style="color: yellow; font-size: 32px; background-color: green">少俭子夹评他，导密。</div>
     <div style="color: yellow; font-size: 32px; background-color: green">磊要杀足都骨场，屯。</div>
 
     <p>磊书放台五勇而郭骨玉护使司上若说谷人快。</p>
     <p>变白惜君其定亲春平曰设弄给国，我爱苟有。</p>
     <p>了第程迷洪不是未本汪在年竟生秦自撒，认。</p>
 
     <h1>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, iste.</h1>
     <h1>Lorem ipsum dolor sit amet.</h1>
     <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h1>
</body>
</html>

css语法：样式名，样式值

color 设置字体的颜色 red green yellow

font-size 设置字体的大小 px 默认的字体大小是16px

background-color 设置背景颜色 red green yellow

03第一种方式：内联样式/行内样式

书写位置：开始标签 style属性，将css样式写在style属性值里面

可以书写多个样式，只要用分隔号；隔开即可

优缺点：

优点：有针对性

缺点：1、结构和表现耦合了

2、修改起来不方便

注意：一般不推荐使用

第二种方式：内部样式表

书写位置：开始标签内部，写一个style标签，通过选择器选中对应的html结构

在大括号里面书写css样式，可以写多组样式，样式之间用，隔开

最后一个样式后可以不加分隔号，但一般都会加上

优缺点：

缺点：复用率不高

注意：css比较多的时候，不推荐使用

第三种方式：外部样式表

书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中

对应的html结构，在花括号里面书写css样式,

然后在head标签内写一个link标签将对应的css文件引入到html文件内

注意：推荐使用

03CSS的语法

CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

CSS的语法：

选择器声明块

选择器：有多种选择器

声明块：具体的css样式，是写在花括号里面

样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开

04CSS常用的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style type="text/css">
  
        h1{
            color: crimson;
        }
        h3{
            color: green;
        }
       
        #p1{
            color: blue;
        }
        #p2{
            color: aqua;
        }
       
        .s1{
            color: red;
        }
        
        *{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div>
        <h1>静夜思</h1>
        <h3>李白</h3>
        <p id="p1">床前明月光</p>
        <p id="p2">疑是地上霜</p>
        <p class="s1">举头望明月</p>
        <p class="s1">低头思故乡</p>
    </div>
</body>
</html>

四种常用的选择器

需求一：标题变色

1、元素选择器（标签选择器）

作用：选中对应标签的内容

语法：标签名｛css样式...｝

例子：h1{},h2{},h3{}....

需求二：第一句变色

2、id选择器

作用：选中对应id属性值的内容

语法：#id属性值{}

例子：#p1{},#p2{}....

注意：id属性值不能重复使用

需求三：第二句变色

3、class选择器

class选择器的用法跟id选择器是一样的，只不过class属性值可以重复使用

语法：.class属性值{}

注意：class属性值可以起多个，中间用空格隔开即开

例子：.s1{},.ss{},.pp{},...

需求四：给所有的标签字体变成24px

4、通配选择器

作用：选中所有标签，进行设置

语法：*{}

05CSS复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
       

        .red{
            color: red;
        }
        div.red{
            font-size: 32px;
        }
        
        h1,h3{
            color: cadetblue;
        }

    </style>
</head>
<body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>三十功名尘与土，八千里路云和月。</div>
    <p>莫等闲，白了少年头，空悲切！</p>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
</body>
</html>

两种复合选择器：交集选择器，并集选择器

需求一：将class为red的诗句变成红色，同时将class为red的div字体变成24px */

1、交集选择器

作用：选中同时符合多个条件的内容

语法：选择器1选择器2选择器3....{}

注意：如果选择器当中有元素选择器，元素选择器必须要放在最前面

例子：p#p1.pp{},div.ss{}

需求二：将h1，h3字体颜色变色

2、并集选择器（群组选择器）

作用：同时选择对应的内容

语法：选择器1，选择器2，选择器3....{}

例子：.red,#red1,div,p{}

06CSS的关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择器</title>
    <style>
        div>h2{
            color: aqua;
        }
        #cs span{
            font-size: 30px;
        }
        .p1+span{
            background-color: red;
        }
        .p1~span{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="cs">
       大超市
       <h2>日常用品区</h2>
       <h2>美妆区</h2>
       <p class="p1">
           衣服区
           <span>女装
               <em>上衣</em>
               <em>裤子</em>
               <em>裙子</em>
           </span>
           <span>男装</span>
           <span>童装</span>
        </p>
        <span>生鲜区</span>
        <span>零食区</span>
    </div>
    <p>小超市</p>
    <h2>水果</h2>
    
</body>
</html>

用关系选择器来选中

需求一：为div的子元素h1设置一个字体颜色 */

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

例子：#red>.green{}, .pp>em{}

需求二：div的span元素字体都变成30px */

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{}

例子：.class .red{}, #red p{}

需求三：通过衣服p标签找到生鲜区，加背景颜色

3、选择下一个兄弟（仅挨着我的一个兄弟）

语法：兄+弟{}

需求四：通过衣服区找到下面所有兄弟，设置字体颜色 */

4、选择下面所有的兄弟（前面的不选）

作用：通过指定的兄找到下面所有的兄弟

语法：兄~弟{}

例子：#red~.p1{}

<!-- 元素之间的关系

父子关系：

父元素直接包含子元素的元素

子元素直接被父元素包含的元素

祖先后代关系：

祖先元素直接或间接包含元素的元素

后代元素直接或间接被包含的元素

兄弟关系：拥有共同父元素的元素

-->

07CSS属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        [id]{ 
            background-color: green;
        }
        p[title]{
            color: blue;
        }
        [title=ab]{
            color: orange;
        }
        [title^=ab]{
            font-size: 30px;
        }
        [title$=ab]{
            background-color: brown;
        }
        [class*=de]{
            color: crimson;
        }
        
    </style>
</head>
<body>
    <h1 title="a" id="abcd">满江红·写怀</h1>
    <h3 title="ab">岳飞·宋</h3>
    <p>····</p>
    <p title="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p title="abcdab">驾长车，踏破贺兰山缺。</p>
    <p class="def">壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p class="cde">待从头、收拾旧山河，朝天阙。</p>
</body>
</html>

需求一：有title属性的p标签，改变其颜色 */

1、属性选择器

通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性

语法:[属性名]{}

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择属性值以指定值开头的元素

[属性名$=属性值]{} 选择属性值以指定值结尾的元素

[属性名*=属性值]{} 选择属性值含有某值的元素