【前端初学者】【CSS笔记】之CSS3基本语法——持续更新

rem	根元素字体大小倍数 rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小
vw	视口宽度的百分之几 viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh	视口高度的百分之几 viewpoint height，视窗高度，1vh=视窗高度的1%
vmax	视口宽高中较大的一个的百分之几 vw和vh中较大的那个
vmin	视口宽高中较小的一个的百分之几 vw和vh中较小的那个

CSS 单位 | 菜鸟教程

1.3 CSS3 新增颜色设置方式

① rgba（RGBA）

RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

a 表示不透明度，取值 0 ~ 1 之间的小数，值越大越不透明，1 表示完全不透明

② hsl（HSL）

HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。

HSL颜色值指定：HSL（色调，饱和度，明度）。

色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的。

h 色相，取值 0 ~ 360
s 饱和度，取值 0% ~ 100%
l 亮度，取值 0% ~ 100%

③ hsla（HSLA）

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

在 hsl 的基础上多了不透明度

CSS 合法颜色值 | 菜鸟教程

二、CSS3 选择器

CSS 选择器 | 菜鸟教程

2.1 基本选择器

① 元素（/标签名）选择器

标签名{ }

div { }

② ID选择器

#ID名 { }

#box { }

③ CLASS(/类名)选择器

.类名{ }

.box1 { }

④ 全局选择器

* { }

⑤ 交集选择器

选择器1选择器2 { }

⑥ 并集选择器

选择器1，选择器2 { }

2.2 层级选择器

① 后代元素选择器

选择器1 选择器2 { }

② 子元素选择器

选择器1 > 选择器2 { }

③ 后面的相邻兄弟元素选择器

选择器1 + 选择器2 { }

必须相邻

④ 后面的通用兄弟元素选择器

选择器1 ~ 选择器2 { }

<p>这是一句话。</p>
<p>这是一句话。</p>
<span>这是插入的一句话</span>
<p>这是一句话。</p>
<p>这是一句话。</p>
<span>这是插入的一句话</span>
<p>这是一句话。</p>
<p>这是一句话。</p>
<span>这是插入的一句话</span>

/* ③后面的相邻兄弟元素选择器 */
p+p {
    background: yellow;
}
/* ④后面的通用兄弟元素选择器 */
span~span {
    background: greenyellow;
}

2.3 属性[attribute]选择器

[attribute] 选择具有attribute属性的元素
[attribute="value"] 选择attribute属性值为value的元素
[attribute^="value"] 选择attribute属性值以value开头的元素
[attribute$="value"] 选择attribute属性值以value结尾的元素
[attribute*="value"] 选择attribute属性值包含value的元素

前端初学者之CSS——属性选择器实例_HY_Sophie的博客-CSDN博客

2.4 伪类选择器

2.4.1 动态伪类选择器

:link 未访问过的超链接
:visited 访问过的超链接
:hover 鼠标悬停在上面的元素
:active 鼠标悬停且鼠标按键按下
:focus 获取焦点的元素

2.4.2 目标伪类选择器

:target 获取到锚点对应的元素

2.4.3 语言伪类选择器

:lang()

2.4.4 UI元素伪类选择器

:enabled 选择到可用的表单控件
:disabled 选择到不可用的表单控件
:checked 选择到被选中的单选框、复选框、下拉选项

2.4.5 结构伪类选择器

:first-child 在兄弟元素处于第一个位置
:last-child                   在兄弟元素处于最后一个位置
:nth-child(n)               在兄弟元素处于第n个位置
:nth-last-child(n)       在兄弟元素处于倒数第n个位置
:only-child                   没有兄弟元素

:first-of-type               在同标签名的兄弟元素处于第一个位置
:last-of-type               在同标签名的兄弟元素处于最后一个位置
:nth-of-type(n) 在同标签名的兄弟元素处于第n个位置
:nth-last-of-type(n) 在同标签名的兄弟元素处于倒数第n个位置
:only-of-type 没有同标签名的兄弟元素

:root 根元素
:empty 没有后代元素也没有文本内容

2.4.6 否定伪类选择器

:not(选择器)

2.5 伪元素选择器

::first-letter / :first-letter       对元素中第一个文字设置样式
::first-line / :first-line 对元素中第一行文字设置样式
::before / :before 给元素动态创建子元素，插入到第一个位置
::after / :after 给元素动态创建子元素，添加到最后一个位置
::placeholder                       设置输入框提示文字的样式
::selection                           设置被选中文字的样式

2.6 选择器的权重（/优先级）

1. ID选择器 > 类选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
2. 行内式权重高于所有的选择器
3. !important 可以将某个样式的权重无限提高

三、CSS3 新增盒子相关样式

3.1 display 属性

CSS display 属性 | 菜鸟教程

3.2 box-sizing 属性

content-box	width 和 height 设置的是元素内容宽高
border-box	width 和 height 设置的是元素的总宽总高
inherit	从父元素继承

CSS3 box-sizing 属性 | 菜鸟教程

3.3 box-shadow 属性

设置元素的阴影

box-shadow: ① , ② , ③ , ④ , ⑤ , ⑥ ;

① 可以为负值，阴影水平偏移

② 可以为负值，阴影垂直偏移

③ 不可以为负值，阴影模糊值

④ 若为长度值，可以为负值，表示阴影外延值

⑤ 设置阴影的颜色

⑥ 内阴影，inset

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item2 .box {
            width: 300px;
            height: 150px;
            line-height: 150px;
            margin: 25px;
            background-color: pink;
            border: 5px dashed #f00;
            font-size: 50px;
            font-weight: 800;
            color: #fff;
            text-align: center;
        }

        .item2 .box2 {
            background-color: burlywood;
            border: 5px dashed orangered;
            box-shadow: inset blue -5px 0px 10px,
                palevioletred 0px 5px 10px,
                gray -5px 0px 8px,
                red 0px 5px 15px,
                purple 5px -5px 20px;
        }
    </style>
</head>

<body>
    <div class="item2">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
    </div>
</body>

</html>

CSS3 box-shadow 属性 | 菜鸟教程

3.4 opacity 属性

设置元素的不透明度，取值0~1，数字越大，不透明度越高

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item1 .box {
            width: 300px;
            height: 150px;
            line-height: 150px;
            margin: 25px;
            background-color: pink;
            border: 5px dashed #f00;
            font-size: 50px;
            font-weight: 800;
            color: #fff;
            text-align: center;
            display: inline-block;
        }

        .item1 .box2 {
            opacity: .6;
        }

        .item1 .box3 {
            opacity: .2;
        }

        .item1 .box4 {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="item1">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>
</body>

</html>

四、渐变

4.1 线性渐变（ linear-gradient ）

linear-gradient:_方向_ , _起止颜色_;

①方向：

关键字设置：

to left：设置渐变为从右到左； to right：设置渐变从左到右；
to top：设置渐变从下到上； to bottom：设置渐变从上到下；

角度设置：

0deg ~ 360deg

②起止颜色：

颜色值和位置组成

举例：

background-image: linear-gradient(60deg, pink 50%, cyan 50%);

background-image: linear-gradient(to top, pink 30px, cyan);

4.2 径向渐变（ radial-gradient ）

4.3 重复渐变

Oct.S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录