CSS3(1)

程序员文章站 2022-05-11 09:09:27

...

#CSS3 层叠样式表(Cascading StyleSheet), 对页面的布局, 字体, 颜色, 背景和其它效果进行控制, 它设置任何一个HTML5元素所具有的属性. ##基础 ###单位 ####颜色除了直接使用颜色名外, 还有HEX, RGB和HSL三种颜色表示方式. RGBA和HSLA是在RGB和HSL基础上附带透明度的颜色表示方式.

HEX: 十六进制数, 如#ff0000是红色
RGB: 红绿蓝十进制, 如rgb(0, 255, 0)是绿色
HSL: 工业色轮, 色调是指色轮转的角度, 由它来决定基础色. H:Hue(色调) S:Saturation(饱和度) L:Lightness(亮度) 如hsl(240, 50%, 50%)是蓝色, 饱和度和亮度均为50%.
RGBA: rgba(255, 0, 0, .5), 透明度为50%.
HSLA: hsla(240, 50%, 50%, .5), 透明度为50%.

####长度 相对长度

px: 像素(假设显示设备分辨率为96dpi)
em: 元素字号的倍数
rem: 根元素字号的倍数
ex: 元素字号"x高度"的倍数
%: 另一属性值的百分比

绝对长度 不推荐使用绝对长度, 它的单位有如下: in(英寸), cm(厘米), mm(毫米), pt(磅), pc(pica)等.

####其他单位 CSS3中新增了角度, 时间, 频率和布局单位.

###层叠 CSS最终的样式展示效果是优先级最高的样式, 优先级别从高到低如下.

元素内嵌样式(style属性)
文档内嵌样式(style标签)
外部样式(link标签)
用户自定义样式
浏览器默认样式

如果优先级相同, 则遵从执行顺序, 后面的CSS覆盖前面的样式. 使用!important标记就可以调节优先级为最高

###显示样式 CSS中可以使用display和visibility属性来设置元素的显示样式

display: 设置元素的类型(显示方式)
- none: 隐藏元素(不占据空间)
- inline: 行内元素
- block: 块级元素
- inline-block: 行内-块级元素
visibility: 设置元素是否可见以及不可见时是否占据空间.
- collapse: 隐藏元素, 不占据空间.
- hidden: 隐藏元素, 占据空间.
- visible: 可见(默认)

行内-块级元素的排列模式与行内元素相同而元素的内容显示与块级元素相同

HTML5中全局属性hidden也不占据空间

##选择器用来选择HTML元素, 之后对元素的样式进行控制, 可以叠加使用.

###基础选择器基础选择器有如下四种, 其中ID选择器的速度最快.

通用选择器(*): 选择所有的元素, 因为性能问题不推荐使用.
ID选择器(#ID): 选择拥有对应的ID的元素.
元素选择器(LABEL): 选择对应的元素.
类选择器(.CLASS): 选择拥有对应的类的元素.

例子: 分别用ID, 元素和类选择器改变文本的颜色, 位置和字体.

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS selector</title>
    <style>
        p {
            color: red;
        }
        .hello {
            text-align: center;
        }
        #main {
            font-size: 24px;
        }
    </style>
</head>
<body>
<p id="main" class="hello">Hello CSS3 !</p>
</body>
</html>

###属性选择器根据元素中的属性的特性而选择元素

[ATTR]: 选择定义ATTR属性的元素
[ATTR=VALUE]: 选择ATTR属性为VALUE的元素
[ATTR^=VALUE]: 选择ATTR属性是以VALUE开头的元素
[ATTR$=VALUE]: 选择ATTR属性是以VALUE结尾的元素
[ATTR*=VALUE]: 选择ATTR属性包含VALUE的元素
[ATTR~=VALUE]: 选择ATTR属性其中一个属性是VALUE的元素
[ATTR|=VALUE]: 选择ATTR属性为VALUE连字符分割的多个值的元素

例子: 利用属性选择器来选择input元素并调整颜色

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS selector</title>
    <style>
        /* 叠加使用使用元素选择器和属性选择器 */
        input[type] {
            color: red;
        }
        input[name=userName] {
            color: blue;
        }
    </style>
</head>
<body>
    <form action="/login">
        <input name="userName">
        <input type="password" name="password">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

###复合选择器不同于选择器的叠加使用, 复合选择器根据元素间的关系来选择元素.

并集选择器(selector1,selector2,...): 同时使用多个选择器
后代选择器(selector1 selector2 ...): 选择子元素(包括其他后代)
相邻选择器(selector1+selector2+...) 选择相邻的下一个同级元素
兄弟选择器(selector1~selector2~...) 选择所有以下的同级元素
子女选择器(selector1>selector2>...) 选择子元素(不包括其他后代)

用来测试复合选择器的例子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS selector</title>
    <style>
        #main, .hello {
            color: red;
        }
        #container p {
            color: blue;
        }
        header > p {
            color: green;
        }
        #foo + p {
            color: yellow;
        }
        #bar ~ p {
            color: orange;
        }
    </style>
</head>
<body>
    <p id="main">Hello CSS3 !</p>
    <p class="hello">Hello CSS3 !</p>

    <div id="container">
        <p>Test</p>
        <div>
            <p>CSS3 Selector !</p>
        </div>
    </div>

    <header>
        <p>Test</p>
        <div>
            <p>CSS3 Selector !</p>
        </div>
    </header>

    <p>foo !</p>
    <p id="foo">foo !</p>
    <p>foo !</p>
    <p>foo !</p>

    <p>bar !</p>
    <p id="bar">bar!</p>
    <p>bar !</p>
    <p>bar !</p>
</body>
</html>

###高级选择器

高级元素选择器
- :not(selector): 取反选择器
- :root: 根元素选择器(html元素)
- :empty: 空元素选择器(没有子元素及内文本)
- :target: 锚点(书签)选择器[选择书签时才会**]
高级同级元素选择器(必须有一个父元素包含,前缀使用子元素.)
- :first-child: 选择第一个元素
- :last-child: 选择最后一个元素
- :nth-child(n): 选择第n个元素
- :nth-last-child(n): 选择倒数第n个元素
- :only-of-type(n): 选择第n个元素(过滤其他同级元素)
- :only-last-of-type(n): 选择倒数第n个元素(过滤其他同级元素)
- :only-child: 选择没有其他同级元素的元素
文本选择器
- ::first-line: 首行选择器
- ::first-letter: 首字母选择器

用来测试高级选择器的例子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS selector</title>
    <style>
        table {
            border: 2px dashed purple;
            font-size: 24px;
            text-align: center;
        }
        :root {
            background: #ccc;
        }
        :empty {
            width: 100px;
            height: 100px;
            background: green;
        }
        table tr:nth-child(odd) {
            background: orange;
        }
        table tr:nth-child(even) {
            background: yellow;
        }
        table tr:first-child {
            font-weight: bold;
        }
        table tr:last-child {
            font-weight: bolder;
        }
        pre::first-line {
            color: red;
        }
        pre::first-letter {
            color: orange;
        }
        /* nth-child和nth-of-type(n)的区别 */
        div span:nth-child(3) {
            color: red;
        }
        div span:nth-of-type(2) {
            color: blue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Fruit</td>
            <td>Price</td>
            <td>Amount</td>
        </tr>
        <tr>
            <td>Apple</td>
            <td>3</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>1</td>
            <td>3</td>
        </tr>
        <tr>
            <td>SUM:</td>
            <td colspan="2">10</td>
        </tr>
    </table>
    <pre>
        Hello HTML5 !
        Hello CSS3 !
    </pre>
    <div>
        <p>first P</p>
        <p>second P</p>
        <span>first span</span>
        <span>second span</span>
        <p>third p</p>
    </div>
    <div></div>
</body>
</html>

###动态选择器

状态选择器
- :enabled: 选择启用状态的元素
- :disabled: 选择禁用状态的元素
- :checked: 选择被选中的的元素(radio,checkbox.)
- ::selection: 选择被用户选取的元素
- :focus: 选择当前获得焦点的元素
- :hover: 选择鼠标悬停在上面的元素(通常是超链接)
- :active: 选择被用户**的元素(通常是超链接)
超链接选择器
- :link: 选择未被**的超链接元素
- :visited: 选择已访问的超链接元素
内容选择器
- :before: 使用content属性在元素文本的开始插入内容
- :after: 使用content属性在元素文本的最后插入内容

用来测试动态选择器的例子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS selector</title>
    <style>
        a:link {
            color: gray;
        }
        a:visited {
            color: blue;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: green;
        }
        ::selection {
            color: purple;
        }
        p:before {
            content: 'Hello ';
        }
        p:after {
            content: ' !';
        }
    </style>
</head>
<body>
    <a href="index.html" target="_blank">Index</a>
    <p>CSS3</p>
</body>
</html>

##样式 ###基础样式 基础样式包括文本, 边框和背景样式.

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Style</title>
    <style>
        p {
            width: 200px;
            height: 150px;
        }
        .border_dashed {
            /* 边框粗细, 样式, 颜色. */
            border: 3px dashed orange;
            /* 背景颜色(background-color) */
            background: #ccc;
        }
        .border_solid {
            /* 分别设置4条边的边框样式 */
            border-left: 3px solid red;
            border-top: 3px solid yellow;
            border-right: 3px solid blue;
            border-bottom: 3px solid green;
        }
        .border_double {
            border: 5px double purple;
            /* 背景图片(background-image) */
            background: url('./images/test.jpg');
            /* background-repeat属性可以设置背景图片的重复样式
               background-attachment属性可以设置背景的附着方式 */
        }
        #first {
            /* 字体样式, 大小, 粗细. */
            font-style: italic;
            font-size: xx-large;
            font-weight: bolder;
            /* font-family属性可以设定字体以及备用字体 */
        }
        #second {
            /* 文本间距, 行高, 首行缩进. */
            letter-spacing: 5px;
            line-height: 40px;
            text-indent: 20px;
        }
        #third {
            /* 文本水平对齐规则 居中(center) 居左(left) 居右(right)
               文本垂直对齐规则没有直接能使用的属性, 可以使用其他特性来完成. */
            text-align: center;
            /* 文本装饰, 大小写形式. */
            text-decoration: underline;
            text-transform: lowercase;
        }
    </style>
</head>
<body>
<p id="first" class="border_dashed">Hello CSS3 !</p>
<p id="second" class="border_solid">
    Hello HTML5 !
    Hello CSS3 !
</p>
<p id="third" class="border_double">Hello CSS3 !</p>
</body>
</html>

ul元素下的li元素还有一个list-style属性可以设置项目标记的样式 ###增强样式

CSS3的增强样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Style</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        #main {
            color: gray;
            font-size: 24px;
            text-align: center;

            border: 3px solid orange;
            /* CSS3的增强样式: 圆角矩形, 文本阴影, 盒子阴影. */
            border-radius: 20px;
            text-shadow:3px 3px 3px rgba(0, 0, 0, .3);
            box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, .6);
            /* background-size属性可以检索或设置对象的背景图像的尺寸大小 */
        }
        #content {
            background: red;
            /* 设置透明度 */
            opacity:.5;
        }
    </style>
</head>
<body>
    <div id="main">
        Hello CSS3 !
    </div>
    <div id="content"></div>
</body>
</html>

##盒模型 CSS的块级元素是一种盒模型的显示模式非浮动的盒模型的结构如下, 其中: DIV为父块级元素, content是元素最终显示的内容区.

---------DIV---------
|       margin      |
|  -----border----  |
|  |   padding   |  |
|  |  ---------  |  |
|  |  |content|  |  |
|  |  ---------  |  |
|  ---------------  |
---------------------

在盒模型中, padding和border属性会增大元素的宽度和高度. ###尺寸和补白

这个例子也说明了透明度元素的色彩会叠加

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Box</title>
    <style>
        #container {
            width: 400px;
            height: 400px;
            background: rgba(255, 0, 0, 0.5);
        }
        #main {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 255, 0.5);
            margin: auto;
            border: 5px dotted #ccc;
            padding-top: 100px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="main">
            Content
        </div>
    </div>
</body>
</html>

在有数个块的margin进行叠加时, 较小的margin值会忽略. ###浮动和定位 ####浮动

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Box</title>
    <style>
        /* 使用display: inline-block;能够很轻松的将3个方块排成一行. */
        div {
            width: 200px;
            height: 200px;
        }
        /* clear属性能够清除浮动 */
        #left {
            background: red;
            float: left;
        }
        #middle {
            background: green;
            float: left;
        }
        #right {
            background: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</body>
</html>

####定位

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Box</title>
    <style>
        .fold {
            position: absolute;
            width: 200px;
            height: 200px;
        }
        #left {
            background: red;
            /* 使用z-index可以改变元素的堆叠优先级
               (必须是定义了position属性为非static的元素)
               元素的默认优先级为0.
            z-index: 9999;*/
        }
        #middle {
            background: green;
            left: 50px;
            top: 50px;
        }
        #right {
            background: blue;
            left: 100px;
            top: 100px;
        }

        #container {
            width: 400px;
            height: 400px;
            background: gray;
            /* 水平和垂直居中方法 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        #main {
            text-align: center;
            font-size: 25px;
            line-height: 200px;
            width: 200px;
            height: 200px;
            background: purple;
            /*若position设置为relative, 则元素不能使用left和top进行定位.*/
            /* 再次使用水平和垂直居中方法 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="left" class="fold"></div>
    <div id="middle" class="fold"></div>
    <div id="right" class="fold"></div>

    <div id="container">
        <div id="main">
            Main
        </div>
    </div>
</body>
</html>

配合定位的还有一个clip属性, 可以对元素内容进行裁剪.

转载于:https://my.oschina.net/u/3655970/blog/1517673

上一篇： html5——html5简介

下一篇： HTML5重要知识收藏

CSS3(1)

解读ASP.NET 5 & MVC6系列教程（1）：ASP.NET 5简介

苹果成自研芯片狂魔！iPhone 11 U1为自主设计芯片

C#基于Windows服务的聊天程序（1）

Tecplot Focus 2018 R1安装破解激活详细图文教程

MODO12怎么破解?the foundry modo 12.0v1安装破解图文详细教程(附下载)

微信小程序限制1M的瘦身技巧与方法详解

jsp Hibernate入门教程第1/3页

HTML5 CSS3打造相册效果附源码下载

MySQL 自动备份与数据库被破坏后的恢复方法第1/2页

Hibernate save() saveorupdate()的用法第1/2页

CSS3(1)

解读ASP.NET 5 & MVC6系列教程（1）：ASP.NET 5简介

苹果成自研芯片狂魔！iPhone 11 U1为自主设计芯片

C#基于Windows服务的聊天程序（1）

Tecplot Focus 2018 R1安装破解激活详细图文教程

MODO12怎么破解?the foundry modo 12.0v1安装破解图文详细教程(附下载)

微信小程序 限制1M的瘦身技巧与方法详解

jsp Hibernate入门教程第1/3页

HTML5 CSS3打造相册效果附源码下载

MySQL 自动备份与数据库被破坏后的恢复方法第1/2页

Hibernate save() saveorupdate()的用法第1/2页

微信小程序限制1M的瘦身技巧与方法详解