css学习(基础三种选择器)

最新推荐文章于 2022-01-26 15:38:04 发布

Re_Dreamer

最新推荐文章于 2022-01-26 15:38:04 发布

阅读量674

点赞数 1

分类专栏：网页前端之路文章标签： html css

本文链接：https://blog.csdn.net/kedat/article/details/121429115

版权

网页前端之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.基础样式：

一标签选择器-------标签名{属性1：；属性2：；}

二 .类选择器--------- .class{属性1：；属性2：；}

三、复合选择器-----（后代选择器、子选择器并集选择器、伪选择器等等）

2.杂项设置（字体/文本属性)

1.基础样式：

选择器{样式}

<head>
        <title>css</title>
        <style>
            /* 选择器{样式} */
            p {  color:red;
                font-size: 120px;
            }
        </style>
    </head>

选择器列表

(1).基础选择器：

一标签选择器-------标签名{属性1：；属性2：；}

可以将所有标签选择出来

二 .类选择器--------- .class{属性1：；属性2：；}

可以差异化地改变样式，类不可用标签名（同时设置全体及个体，个体优先度更高）

<!DOCTYPE html>
<html>
    <head>
        <title>css</title>
        <style>
            /* 选择器{样式} */
            .w{  
                color:green;
                font-size: 40px;
            }
            .we{  
                color:red;
                font-size: 40px;
            }
            .wer{  
                color:yellow;
                font-size: 40px;
            }
            span{
                color:gold;
                font-size:40px;
            }
        </style>
    </head>
    <body>
        <a class="w">Lorem, ipsum dolor.</a>
        <p class="we">Lorem ipsum dolor sit.</p>
        <p class="wer">Lorem ipsum dolor sit amet.</p>
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos!</span>
    </body>
</html>

三、复合选择器-----（后代选择器、子选择器并集选择器、伪选择器等等）

（1）后代选择器(可以选择任意一级)：

<style>
    /* 可以为类名 */
    ul li/* 父级 子级 */{

    
    }
</style>

（2）子选择器(仅可选择最近一级)：

 <style>
        /* 父级 > 子级 */
        /* 改变div中直属a(即直接包含关系嵌套除外) */
        div > a {
            color: blue;
        }
    </style>

    <div>
        <a>1</a><!-- 改变 -->
        <p> <a>2</a> </p><!-- 不变 -->
        <a>3</a><!-- 改变 -->
    </div>

（3）并集选择器:

    <style>
        /* 任意一名称都可作为其内容 */
        /* 如：标签1,标签2,标签3等 */
        div,ol li{
            color:skyblue;
        }
    </style>

(4)伪类选择器：

链接伪类选择器

foucs选取焦点的表单元素，即光标点击目标会改变其颜色

2.杂项设置（字体/文本属性)

字体设置：

.w{  
                /* 可用预设英文/十六进制/rgb代码(0,255)或(0,1.0) */
                color:black;
                font-size: 40px;
                /* 当前面字体无法正常显示会用后面的替代 */
                font-family:'宋体','微软雅黑';
                /* 字体大小 normal(想当于number=400)/bold(粗体相当于nubmer=700)/bolder(特粗体)/lighter(细体)/number */
                font-weight:1000;
                /* 改变字体风格 默认normal，如下斜体*/
                font-style:italic;
            }
            /* 简写方式 font-style font-weight font-size font-family (其中font-size fony-family 不可省略)*/
            .we{  
                font:italic 1000 40px '宋体' ;
            }

文本属性：

            h1{
                /* 可设置对齐方式 */
                text-align:center;
                /* 设置文本装饰 none/overline/underline/line-through */
                text-decoration:line-through;
                /* 文本缩进 px/em(一般为`当前文字大小(font-size)一文字) */
                text-indent:2em;
                /* 行间距 同文本缩进*/
                line-height:1em;
            }

样式表类型:

一般练习为内部样式表即上图，一般放在head里

其次行内样式表如:

<div style="color:deepskyblue;font-size:12px;">ewewewe</div>

外部样式表：
单独引用一个css文件储存信息:

/* 仅有样式信息 */
span{
    color:blue;
    font-size:22px;
}

然后用link引用:

        <link rel="stylesheet" href="css文件的路径">

Re_Dreamer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习(基础三种选择器)

1.基础样式：选择器{样式}<head> <title>css</title> <style> /* 选择器{样式} */ p { color:red; font-size: 120px; } </style> </head>选择器列表(1)....
复制链接

扫一扫