为网页添加样式（选择器和声明块）

最新推荐文章于 2024-03-26 10:30:10 发布

Fraser207

最新推荐文章于 2024-03-26 10:30:10 发布

阅读量559

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_56458222/article/details/121562065

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

8.text-indent：2em 2px

css规则=选择器+声明块

简单的选择器

选择器的作用：帮助开发者精准的选中想要的元素

1.id选择器

选中的是对应Id值的元素（元素后跟id,对应声明块中#后缀）

    <style>
        #text{
            color: red;
            background-color: black;
        }
    </style>
</head>
<body>
    <p id="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni natus mollitia nobis exercitationem delectus odit obcaecati explicabo. Tenetur laboriosam vero sapiente illum iure, corrupti a, consequuntur esse unde sed tempora magni molestiae vel fugiat blanditiis, ipsa tempore in quisquam maxime sint porro aliquam ullam debitis. Earum debitis, asperiores doloremque explicabo non dolorem quia rerum, nostrum, odio quibusdam eveniet nihil? Debitis sunt consequatur, assumenda quam minima labore architecto maiores autem delectus aspernatur harum, mollitia commodi iste, enim qui explicabo libero. Rem neque quisquam veritatis repudiandae, fugiat tempore nemo, delectus eos eius voluptas corrupti ipsam ab perspiciatis optio maxime similique id voluptate.</p>

</body>

2.元素选择器

直接在声明块中书写所需添加样式的元素即可，若多个可用“，”隔开

    <style>
        p,q{
            color: #666;
        }
        .apple{
            background-color: blue;
        }

    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, porro.</p>
    <q>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, necessitatibus.</q>
    <biockquote class="apple">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, debitis quidem esse, sapiente minus odit aliquid maxime perferendis voluptate iste provident beatae eligendi necessitatibus illo corrupti fuga neque laudantium? Dolore.</biockquote>
    <h2 class="apple">壬杨韦先，宋过。</h2>

</body>
</html>

3.类选择器

元素后跟class属性，声明块用.后缀引用

4.通配符选择器

仅需在声明块中用*引用即可

    <style>
        *{
            color: lightblue;
        }
    </style>
</head>
<body>
    <div>迷人月因。</div>
    <p>更血屯病。</p>
    <h1>临不当将。</h1>
</body>
</html>

5.属性选择器

1.在[ ]中书写所需添加样式的元素的共有属性

        [href]{
            color: purple;
        }   
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.taobao.com">淘宝</a>
    <a href="https://www.douyu.com">斗鱼</a>
</body>
</html>

2.表示带有以class命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为2

        [class~="2"]{
            background-color: black;
        } 
    </style>
</head>
<body>
    <a class="1 2 3" href="https://www.baidu.com">百度</a>
    <a href="https://www.taobao.com">淘宝</a>
    <a href="https://www.douyu.com">斗鱼</a>
</body>
</html>

6.伪类选择器

选中某些元素的某种状态

1.link(超链接未被访问时的状态)

2.visited（超链接访问过的状态）

3.hover（鼠标移上去的样式，鼠标悬停状态）

4.active（激活状态，鼠标按下的状态）

一般按照以上顺序编码，即"爱恨法则"

5.first-child

选中第一个子元素

first-of-type

选中子元素中第一个指定类型的元素

6.last-child

选中最后一个子元素

last-of-child

选中子元素中最后一个指定类型的元素

7.nth-child

选中指定的第n个子元素

取值even,则选中偶数

取值odd,则选中奇数 (可在表格元素的隔行变色中使用该属性值)

nth-of-child

选中子元素中第n个指定类型的元素nth

-child

    <style>
        a:link{
            color: green;
        }
        a:visited{
            color:purple ;
        }
        a:hover{
            color: rgb(206, 24, 24);
        }
        a:active{
            color: chocolate;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.taobao.com">淘宝</a>
    <a href="https://www.douyu.com">斗鱼</a>
</body>
</html>

7.伪元素选择器

1.before

生成并选中某个元素内部的第一个子元素

2.after

生成并选中某个元素内部的最后一个子元素

    <style>
       span::before{
           content: "#";
           color: pink;
       }
       span::after{
           content: "#";
           color: purple;
       }
    </style>
</head>
<body>
    <p>我喜欢玩<span>射手</span>和刺客</p>
</body>
</html>

3.first-letter

选中元素的第一个字母

4.first-line

选中元素的第一行的文字

5.selection

选中被用户框选的文字

选择器的组合

1.并且

连着写就完事了，元素或者选择器以及属性之间任何空格啥间隔都没得

    <style>
        p.cat{
            color: purple;
        }
    </style>
</head>
<body>
    <p class="cat">王特尘视回有定皇揽了都视惊事魂。</p>
    <q>自意何徒乐自胜找胜动太收讨秦属。</q>
</body>
</html>

2.后代元素（实际开发中用的很多）

后代与祖先之间必须需要用空格间隔开

    <style>
        div li{
            color: purple;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
        </ul>
    </div>
</body>
</html>

3.子元素（实际开发中用的并不多)

子元素和与他对应的父元素之间用>连接

4.相邻兄弟元素

兄弟元素之间用+连接，能修饰下面的兄弟（可应用于多个列表中）

    <style>
        .dog{
            color: purple;
        }
        .dog+li{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>lorem1</li>
            <li>lorem1</li>
            <li class="dog">lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
        </ul>
    </div>
</body>
</html>

5.兄弟元素

兄弟元素之间用~连接，只能修饰下面的所有兄弟（可应用于多个列表中）

选择器的并列

多个选择器，用“，”分隔

css代码书写位置

1.内部样式表

书写在style元素中（在head中）

2.内联样式表（元素样式表）

直接书写在元素的style属性中

3.外部样式表

将样式书写在独立的css文件中

常见的样式声明

1.color

元素内部的文字元素

两种书写格式：预设值，即颜色的单词如:red black chocolate

三原色的色值，光学三原色（红，绿，蓝）每个元素可以用0~225之间的数字表达

16进制表示法如 #668282

淘宝红:#ff4400 黑色:#000 白色:#fff 红色:#f00 绿色:#ofo 蓝色:oof 紫色:fof

青色:#off 黄色:#ffo 灰色:#ccc

2.background

区别：通常，img元素是属于HTML的概念，背景图是属于css的概念

当图片属于网页内容时，必须使用img元素

当图片属于网页美化时（仅用于)，必须使用背景图

1.background-image:url("")

引号中书写图片路径

2.background-repeat:repeate

图片默认情况下，背景图会在横坐标和纵坐标中重复

属性值：repeat-x 在X轴上重复

repeat-y 在Y轴上重复

no-repeat 即不重复

3.background-size: contain;

背景大小，contain(不损坏) cover(撑满)

（x,y）括号中可写数值或百分比

4.background-position: left

设置背景图的位置：

预设值（left,button,right,top,center）也可为数值

雪碧图（精灵图）background-position搭配width，height实现

5.background-attachment: fixed

通常用它控制背景图是否固定（相对于视口）

6.背景图和北京颜色混用

解决底部白边问题

7.速写属性

先写位置，后写尺寸，用 / 分隔

关于图片像素尺寸的测量使用 PX COOK

ALT+鼠标滑轮实现缩放空格+鼠标实现拖拽

3.font-size

元素内部文字的尺寸大小

1) px:像素 (绝对单位)

2) em:相对单位，相对于父元素字体大小。

每个元素必须有字体大小，如果没有直接声明，则使用父元素字体大小。

如果没有父元素，则使用基准字号

4.font-weight

文字粗细程度，可以取值数字，可以取值预设值。

不加粗normal 加粗bold

5.font-family

文字类型，有：consolas,翩翩体-简，微软雅黑，Arial等

必须用户计算机存在的字体才会有效，使用多个字体，匹配不同环境。

sans-self 非衬线字体

6.font-style

字体样式，通常用它设置斜体

>i元素.默认样式，是倾斜字体；实际使用，通常用它表示一个图标（icon）

>strong.默认加粗

>em.斜体

7.text-decoration

>a元素

>del元素:废弃的内容（错误）

>s元素:过期的内容

8.text-indent：2em 2px

首行文本缩进

9.line-height

垂直居中取值为height值

每行文本的高度，该值越大，每行文本的距离越大。

设置行高为容器的高度，可以让单位文本垂直居中。

行高可以设置为纯数字，表示相对于当前元素字体的大小。

两种用法：可写道body中，可写道style中

10.width

宽度

11.height

高度

12.letter-space

文字间隙

13.text-align

元素内部文字的水平居中排列方式 center

left居左 right居右

Fraser207

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
为网页添加样式（选择器和声明块）

css规则=选择器+声明块简单的选择器选择器的作用：帮助开发者精准的选中想要的元素id选择器选中的是对应Id值的元素（元素后跟id,对应声明块中#后缀） <style> #text{ color: red; background-color: black; } </style></head><body> <p id="tex..
复制链接

扫一扫