Web前端CSS学习

最新推荐文章于 2024-05-29 15:45:18 发布

Chamoiu

最新推荐文章于 2024-05-29 15:45:18 发布

阅读量673

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_29171215/article/details/121693659

版权

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

使用方法

1.内嵌式

<p style="color: blue; font-size: 32px;"><!--设置p标签里内容为蓝色，字体大小为32像素 -->
        这是一段文字
    </p>

在p标签里 style= 就是css 对html元素进行美化。color- 颜色 font-size-字体大小

2.内联/内部式

<head>
    <title>Document</title>
    <!-- 内联/内部式 -->
    <style>
    
        
    </style>
</head>

内部样式是在 html中的head用style{}，在{}里对html中的元素进行修改

3.外链式

<title>Document</title>
    <!-- 外部样式 -->
    <link rel="stylesheet" type="text/css" href="css文件地址">
</head>

外链式也是html的head里用link代码连接css 文件夹，href="" 引号里是css文件所在位置

举个栗子：

在博客测试文件里有css 文件夹以及网页html，而style.css在css文件夹里，那我们在html设置外链的地址就为html文件所在位置里的css文件下style.css

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
</body>
</html>

更多路径问题请移步Wbe前段HTML学习，里面有绝对路径和相对路径的解释和栗子。

CSS选择器

1. 标签选择器：直接用标签名来做选择对其进行更改

<html>
    <head>
        <title>标签选择器</title>
        <style>
            p{
                color:red;    /* p标签里的内容颜色为红色 */
                font-size:12px /* p标签里的字体大小为12像素 */
              }
            div{
                 height: 150px;    /* div标签的高度为150像素 */
                 width: 150px;     /* div标签的宽度为150像素 */
                 background-color: saddlebrown;    /* div标签的背景颜色为暗红 */
                }
        </style>
    </head>
<body>
        <p>这是一个p标签</p>
        <div>这是一个div标签</div>
</body>
</html

2.类选择器：用class 给标签起名字，用这个名字来做选择对其进行更改，类选择器用"."来对类名进行选择。

<html>
    <head>
        <title>类选择器</title>
        <style>
            .font-31{
                color:red;    /* p标签里的内容颜色为红色 */
                font-size:12px /* p标签里的字体大小为12像素 */
              }
            .font-32{
                color:blue;
                    }
            .fon-33{
                 height: 150px;    /* div标签的高度为150像素 */
                 width: 150px;     /* div标签的宽度为150像素 */
                 background-color: saddlebrown;    /* div标签的背景颜色为暗红 */
                }
        </style>
    </head>
<body>
        <p class="font-31">这是一个p标签，class名为font-31</p>
        <p class="font-31">这是一个p标签，class名为font-31</p>
        <p class="font-32">这是一个p标签，class名为font-32</p>
        <div class="font-33">这是一个div标签,clas名为font-33</div>
</body>
</html

如上面代码，多个p标签的class名可以相同，选中同一个clss名，可以对用相同class名的标签里的内容进行修改。

3.id选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #font-20{
            width: 300px;/* 设置id名为font-20的宽度为300像素 */
            height: 300px;/* 设置id名为font-20的高度为300px */
            background-color: chocolate;/* 设置id名为font-20的背景颜色为chocolate */
        }
    </style>
</head>
<body>
    <div id="font-20">这是一个div</div>
</body>
</html>

效果图：

4.通配符选择器：用*对HTML中所有元素进行样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
    *{
        background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <div id="font-20">这是一个div</div>
</body>
</html>

效果图：

5.后代选择器：后代选择器用于选取某元素的后代元素，无视层级关系。以下实例选取所有 <p> 元素插入到 <div> 元素中:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div p{
            color: crimson;
            font-size: 20px;
        }

    </style>
</head>
<body>
    <div>
        <p>在div中</p>
        <p>在div中</p>
    </div>
    <p>不在div中</p>
    <p>不在div中</p>
</body>
</html>

效果图：

6.子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div>p{
            color: crimson;
            font-size: 20px;
        }

    </style>
</head>
<body>
    <div>
        <span><p>在div里的span里</p></span> 
    </div>

    <div>
        <p>在div里</p>
    </div>
    <p>不在div里</p>
</body>
</html>

效果图：

7.！ important：CSS 中的 !important 规则用于增加样式的权重。!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

没用！ important前

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #test2{
            color: darkblue;
        }
        .test{
            color: darkgreen;
        }
        p{
            color: crimson;
        }

    </style>
</head>
<body>
    <p>标签选择器</p>
    <p class="test">这是class选择器</p>    
    <p id="test2">这是id选择器</p>

</body>
</html>

效果图：

用！important 后

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #test2{
            color: darkblue;
        }
        .test{
            color: darkgreen;
        }
        p{
            color: crimson !important; /* 我在这里加了！important ，所有p标签里的内容都会变为crimson */
        }

    </style>
</head>
<body>
    <p>标签选择器</p>
    <p class="test">这是class选择器</p>    
    <p id="test2">这是id选择器</p>

</body>
</html>

效果图：

8.优先级 -权重

通配标签（*） 0 0 0 0 <标签选择器（p,a.img.div等） 0 0 0 1<类选择器（.） 0 0 1 0<ID选择器（#） 0 1 0 0<内嵌式 1 0 0 0<！important ∞无穷大

Chamoiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端CSS学习

什么是 CSS?CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS 文件中多个样式定义可层叠为一使用方法 1.内嵌式<p style="color: blue; font-size: 32px;"> 这是一段文字 &...
复制链接

扫一扫