CSS入门（一）

最新推荐文章于 2023-12-15 16:42:47 发布

草木冬

最新推荐文章于 2023-12-15 16:42:47 发布

阅读量598

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/evil_magician/article/details/80068308

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1CSS的概念

CSS指的是层叠样式表
是用来美化HTML网页的控件。

2选择器

选择器：{
        属性：值；
        属性：值；
        属性：值；   
        }

属性	解释
width	控件宽度属性
height	控件长度属性
background-color	背景颜色
font-size	字体大小(px)
color	文本的颜色
text-align	控件内容的对齐方式
Text-indet	首行缩进（em，对应汉字大小）

2.1基础选择器

2.1.1标签选择器

标签{属性：值；}

<style type="text/css">
    p{
        background-color: red;
    }   
</style>

<body>
    <p>哈哈哈哈哈哈</p>
    <P>嘿嘿嘿嘿嘿黑</P>
    <P>呵呵呵呵呵呵</P>
</body>

所有的p标签都遵循这个标准
这里写图片描述

颜色的显示方式

直接写颜色：red、pink、white、black
十六进制：#XXXXXX；
前面两位代表红色，中间代表绿色，最后代表蓝色
用rgb方式：rgb(x,x,x)
用rgba的方式：a代表了透明度(值0-1）

2.1.2类选择器（*）

.类名{}

<style type="text/css">
    .box{
        color:#971012;
    }   
    .vox{
        background-color: #886644;
    }
</style>

<body>

    <p class="box">哈哈哈哈哈哈</p>
    <P>嘿嘿嘿嘿嘿黑</P>
    <P>呵呵呵呵呵呵</P>
    <div class="box vox"  >
        我是一个div
    </div>
</body>

这里写图片描述
只有CLSS属性为BOX的控件才被CSS修饰。
特点：

不同类的控件调用不同的CSS修饰
多个标签可以调用同一个类选择器

类选择器的命名规范

不能使用纯数字或者数字开头来定义类名
不能使用特殊符号，除了_
不建议用汉字和关键字来定义

规范：

2.1.3ID选择器

#ID名{}

<style type="text/css">
    #bigwang{
        background-color: lightskyblue;
        font-size: 25px;
        text-align: center;
    }
</style>

<body>
    <div id="bigwang">
        大王大王大王大王大王大王大王大王大王大王大王大王大王大王大王大王大王
    </div>
    <div>
        小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵小兵
    </div>
</body>

这里写图片描述

一个ID选择器在一个页面只能被调用一次。
一个标签也只能对应的调用一个ID选择器。
ID选择器可以和类选择器联用。

2.1.4通配符选择器

*ID名{}
给所有的标签都使用相同的样式。
不推荐使用，增加浏览器的负担。

2.1.5复合选择器

两个或者两个以上的选择器，通过不同的方式联合在一起。

2.1.5.1交集选择器

多个选择器的交集（满足所有特征）：
选择器1选择器2{}

<style type="text/css">
    div.box1{
        color: aquamarine;
    }
</style>

<body>
    <div class="box1">
        AAAAAAAAAAAAAAAAAAA
    </div>
    <div>
        BBBBBBBBBBBBBBBBBBB
    </div>
    <p class="box1">
        CCCCCCCCCCCCCCCCCCC
    </p>
</body>

这里写图片描述

2.1.5.2并集选择器

多个选择器的并集（只要满足特征）：
选择器1,选择器2{}

<style type="text/css">
    div,.box1{
        color: aquamarine;
    }
</style>

<body>
    <div class="box1">
        AAAAAAAAAAAAAAAAAAA
    </div>
    <div>
        BBBBBBBBBBBBBBBBBBB
    </div>
    <p class="box1">
        CCCCCCCCCCCCCCCCCCC
    </p>
</body>

这里写图片描述

2.1.5.3后代选择器（*）

选择某个选择器选择的标签的后代（只要是子代就可以被选中）：
选择器1 选择器2{}

<style type="text/css">
    div p{
        color: aquamarine;
    }
</style>
<body>
    <div class="box1">
        <span><p>AAAAAAAAAAAAAAAAAAA</p></span>
    </div>
    <div>
        <p>BBBBBBBBBBBBBBBBBBB</p>
    </div>
</body>

这里写图片描述

2.1.5.4子代选择器

选择某个选择器的直接子代（只可以选中直接子代）
选择器1>选择器2{}

<style type="text/css">
    div>p{
        color: aquamarine;
    }
</style>

<body>
    <div class="box1">
        <span><p>AAAAAAAAAAAAAAAAAAA</p></span>
    </div>
    <div>
        <p>BBBBBBBBBBBBBBBBBBB</p>
    </div>
</body>

这里写图片描述

3文本属性

属性	解释
font-size	字体大小（px）
font-weight	字体粗细（100-900）从700开始变粗，不推荐使用bold
font-family	文本字体
font-style	normal默认,italic斜体
line-height	行高

3.1属性连写

font:font-style font-weight font-size(*)/font-heigh font-family()

font:italic 700 16px/40px 微软雅黑;

注意：一定要按照顺序书写

字体（font-family）的格式可以为：中文，拼音，Unicode码

草木冬

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS入门（一）

1CSS的概念CSS指的是层叠样式表是用来美化HTML网页的控件。2选择器选择器：{ 属性：值；属性：值；属性：值； } 属性解释 width 控件宽度属性 height 控件长度属性 background-color 背景颜色 font-s...
复制链接

扫一扫