CSS的基础以及选择器

最新推荐文章于 2024-07-24 21:03:00 发布

草莓丸子不加冰

最新推荐文章于 2024-07-24 21:03:00 发布

阅读量234

点赞数

分类专栏： CSS 文章标签： css html web html5

本文链接：https://blog.csdn.net/qq_43690438/article/details/107510942

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS的基础以及选择器

网页基本结构

网页分为三部分

结构（HTML）

表现（css）

行为（JavaScript）

CSS的引入方式

CSS位置在head标签里面的style标签里面进行书写:

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        h2 {
            color: brown;
            font-size: larger;
            background-color: blueviolet;
        }
    </style>
    <link rel="stylesheet" href="03.css外部样式表.css">
</head>

rel: 告诉浏览器，这是一个样式表文件，

href: 样式表文件的路径。

第一种：行内样式
在标签内通过style属性设置

<p style="color: aqua;font-size: large;">今天天气真好！</p>

第二种：内部样式表
通过head里面的style设置样式

 <style>
        h2 {
            color: brown;
            font-size: larger;
            background-color: blueviolet;
        }
 </style>
//
<h2>lalala</h2>

第三种：外部样式表
通过head里link标签引入外部css文件；
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QsoNRjYC-1595393318625)(C:\Users\叶子\AppData\Roaming\Typora\typora-user-images\image-20200722114456636.png)]$

<span>am lalala</span>

样式优先级

内部、外部、行内样式，采用就近原则。

字体属性

字体大小设置 :

font-size: larger;

字体粗细：normal（400）; ligther bold（700）; bolder（100-900）加粗 .

font-weight: bolder;

字体风格：normal itallic(斜体，针对某些字体) oblique（斜体，）;

font-style: italic;

文本属性：

<style>
        p{
            /* 用于指定颜色 */
            color: brown;
            /* 块级元素文本水平对齐方式 justify（常用于英文）*/
            text-align: left;
            /* 用于文本修饰： none(默认值，超链接使用)
             underline(下划线) overline(有点像删除线) linethrough(有点像删除线)*/
            text-decoration: line-through;
            /* 文本块首行缩进 
                2em:表示两字符    
            */
            text-indent: 20px;
            /* 增加或者减少文本(单个字)之间的间隙 */
            letter-spacing: normal;
            /* 词组之间的间隙 */
            word-spacing: 20px;
            /* 行高 */
            line-height: 30px;
        }
        h3{
            /* 用于转换英语字母大小写
                none（默认值）
                capitalize（首字母大学）
                uppercase(全部大写)
                lowercase(全部小写)
            */
            text-transform: none;
            /* 设置文本阴影效果 
            (水平距离 垂直距离 模糊距离 颜色)*/
            text-shadow: 5px 5px 6px rgb(5, 5, 34);
        }
    </style>

id选择器

使用标签选择器里的id属性设置一个id名，并且 id名称不可重复！

<style>
        #la{
            text-shadow: 5px 5px 5px blueviolet;
        }
        #so{
            color: cornflowerblue;
        }
 </style>

<body>
    <p id="la">国家统计局15日发布宏观经济数据显示，中国经济运行５月份延续回暖态势，积极因素逐步增多，增长动能加速集聚。
        ，也为各国探索行之有效的复工复产之路带来重要启示</p>
    <p id="so">工业服务业实现增长，国内消费持续升温，高科技产业和社会领域投资增速由负转正，制造业采购经理指数等连续3个月保持临界点以上，数字经济等增长新动能不断增强……</p>
</body>

class选择器：

class选择器可以被多个标签引用。

##### 

<style>
        .la{
            text-shadow: 5px 5px 5px blueviolet;
        }
        .so{
            color: cornflowerblue;
        }
 </style>


<body>
    <p class="la">国家统计局15日发布宏观经济数据显示，中国经济运行５月份延续回暖态势，积极因素逐步增多，增长动能加速集聚。
        ，也为各国探索行之有效的复工复产之路带来重要启示</p>
    <p class="so">工业服务业实现增长，国内消费持续升温，高科技产业和社会领域投资增速由负转正，</p>
    <p class="la">
        制造业采购经理指数等连续3个月保持临界点以上，数字经济等增长新动能不断增强……
    </p>
</body>

通配符

用*号标识，用于所有标签元素，一般用于清除通配符的默认样式。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            color: crimson;
        }
    </style>
</head>
<body>
    <div>i am div</div>
    <p>i am p</p>
    <h3>i am h33</h3>
</body>

如图：

链接伪类选择器

主要针对a标签

:link 对未访问链接样式

:visited 链接被访问过的状态

:hover 鼠标移入时状态

:active 被鼠标点击时的状态

 <style>
        a:active{
            color: rgb(208, 200, 212);
        }
        
</style>

<body>
    <a href="https://www.baidu.com">没有链接</a>
</body>

结构伪类选择器

不会自动过滤中间夹杂的其他标签

:first-child 获取第一个元素

：last-child 获取最后一个元素

：nth-child（n） n为数字

<style>
        p:first-child{
            color: darksalmon;
        }
        p:last-child{
            color: darkviolet;
        }
        p:nth-child(3){
            color: rgb(202, 17, 17);
        }
</style>
/
<body>
    <p>i am 1</p>
    <h3>111222</h3>//夹杂的其他标签
    <p>i am 2</p>
    <p>i am 3</p>
    <p>i am 4</p>
    <p>i am 5</p>

</body>

如图：
在这里插入图片描述

结束啦~~~~

草莓丸子不加冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的基础以及选择器

CSS的基础以及选择器网页基本结构网页分为三部分结构（HTML）表现（css）行为（JavaScript）CSS的引入方式 CSS位置在head标签里面的style标签里面进行书写:<head> <meta charset="UTF-8"> <title>CSS</title> <style> h2 { color: brown;
复制链接

扫一扫

专栏目录