CSS层叠样式表

最新推荐文章于 2020-02-09 16:39:47 发布

Solaris秋

最新推荐文章于 2020-02-09 16:39:47 发布

阅读量434

点赞数 1

分类专栏：前端网页设计文章标签： css html html5

本文链接：https://blog.csdn.net/L1194774003/article/details/103979620

版权

前端网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

层叠式样式表CSS（级联样式表）

简介

Cascading Style Sheet，级联样式单，缩写 css，是用于设计网页风格的，和html一起使用，可以使html网页更加多样化。

使用方法

1.使用行内样式

这种方式将样式行内定义到具体的HTML元素，通常用于精确控制一个HTML元素的风格，在这种方式下，每个css样式只控制单个HTML文件。

2.使用内部样式定义

这种方式是通过在HTML文档头定义样式单部分来实现的，在这种方式下，每个css文件只能控制一个HTML网页。

3.导入外部样式文件

将样式文件彻底与HTML文件分离，样式文件需要额外导入。在这种方式下，一批样式可控制多份文档，导入时使用@import来引入。

4.链接外部样式文件

这一种方式与上一种方式类似，且比上一种运用更加方便，稳定，广泛。

引入外部样式文件

上述方法中，第四个更加常见，运用连接外部样式文件的方法导入文件，只需要在html文件的头部（< head >）中添加一行代码，运用link元素。

< link type="text/css" rel="stylesheet" href="css文件的绝对路径或者相对路径"/ >

其中type和rel属性表明了该页面使用了css样式单，href属性则表明了此种方式需要链接的外部样式文件的地址。

使用内部css样式

此种方法使用css样式单，代表该样式只能在本文件使用，在其他html运用则必须重新定义，且修改时不方便，需要打开每一个html来修改，很不方便。适合添加一些简单的、小规模的css样式，不过仍不推荐使用。
使用内部css样式是，需要使用style标签。在< head >标签中添加< style type=“text/css” >…< /style >，在其中定义样式。

使用行内css样式

只对单个html元素起作用，在使用时，在需要修改的标签里添加style=“…”语句，引号内部添加样式

各类选择器

下文中，
E代任意HTML元素，*是通配符，代表html中所有元素，Select代表选择器，指定该定义对什么元素起作用，｛property1：value1；property2：value2；｝property代表要修改的属性，value代表要修改的值。

元素选择器

E{…}、* {…}

属性选择器

E{…｝指定该css样式对所有E元素起作用。
E[attr]{…} 指定对具有attr属性的E元素起作用
E[attr=value]{…} 指定对具有attr属性且属性值为vaue的元素起作用
E[attr ~=value]{…} 指定该css样式对所有包含sttr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用
E[attr |=value]{…} 指定对虽有包含attr属性且attr属性的值为以连字符分割的系列值，其中第一个值为value的tag元素起作用
E[attr *=“value”]{…｝指定对包含attr的属性且attr属性为包含value的字符串的E元素起作用
E[attr ^=“value”]{…} 指定对所有包含attr的属性且attr属性的值为以value开头的字符串的E元素起作用
E[attr $=“value”]{…} 指定对所有包含sttr的属性，且属性值为包含value结尾的字符串的E元素起作用

##例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <link href="css/outer.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        div{          /*对所有div元素都起作用的css样式 */
            width:300px;
            height:30px;
            background-color:#eee;
            border:1px solid black;
            padding:10px;
        }
        div[id]{      /*对有id属性的div元素起作用的css样式 */
            background-color:#aaa;

        }
        div[id*=xx]{   /*对有id属性值包含xx的div元素起作用的css样式 */
            background-color:#999;

        }
        div[id^=xx]{ /*对有id属性值以xx开头的div元素起作用的css样式 */
            background-color:#555;
            color:#fff;
        }
        div[id=xx]{  /*对有id属性值等于xx的dic元素起作用的css样式 */
            background-color:#111;
            color:#fff;
        }
    </style>
</head>
<body> 
    <div>没有任何属性的div元素</div>
    <div id="a">带id属性的div元素</div>
    <div id="zzxx">id属性只包含xx子字符串的div元素</div>
    <div id="xxyy">id属性值以xx开头的div元素</div>
    <div id="xx">id属性值为xx的div元素</div>

</body>
</html>

在这里插入图片描述

id选择器

通过在html元素中添加id属性，
#idValue{…}指定该css样式对id为idValue的HTML元素起作用。

class选择器

通过在html元素中添加class属性，
.classValue{…}指定该css样式对id为idValue的HTML元素起作用。

##该选择器在css中较为常用

包含选择器

在多个标签，元素中，用空格隔开的选择器
最开始的元素一般称为父级元素每个空格内进一层或者多层，元素从父级到子级必须从大到小排列，
Selector1 Selector2｛…｝
最后一个元素为要操作的元素,注意以上只提及了从父级到子级，其实只要是包含关系就可以

子选择器

与包含选择器类似，但必须是从父级到子级。
Selecctor1>Selecctor2{…}

兄弟选择器

Selecctor1 ~ Selecctor2 {…} Selecctor1对应的元素后面、能匹配的Selecctor2的兄弟节点，简单说只对“弟弟元素”起作用，若Selector1前面还有Selector2元素，本选择器不起作用。

选择器组合

Selecctor1，Selecctor2，Selecctor3，… {…}
该语句的css样式对用逗号隔开的每个Selector属性都起作用

伪元素选择器

:first-letter 对指定对象内的第一个字符起作用
:first-line 对指定对象内的第一个内容起作用
:before 在指定对象内部的前端插入内容
:after 在指定对象内部的尾端添加内容

使用时，选择器无空格的添加在Selector后面

与内容相关的属性

include-source：该属性的值为url（url），插入绝对或相对url地址所对应的文档，目前没有浏览器支持该属性。
content 值可以是字符串，url（url），attr（alt），counter（name），counter
(name,list-style-type)，open-quote，close-quote等格式，该属性用于向指定元素前后插入指定内容

quotes 该属性用于为content属性定义open-quote和close-quote，该属性的值可以是连个以空格分割的字符串，其中前面的字符串是open-quote，后面的字符串是close-quote。
counter-increment 该属性用于定义一个计数器值就是所定义的计数器的名称
counter-reset 该属性用于对指定计数器值复位。

伪类选择器

Selector:root 匹配文档根元素，html文档中永远是< html/ >元素
Selector:first-child 匹配符合Selector元素的第一个孩子
Selector:nth-child(n) 匹配从其父元素的第n个子节点的元素
Selector:nth-last-child(n) 匹配从其父元素的倒数第n个子节点的元素
Selector:first-of-type 匹配与他同类型、同级的兄弟元素的第一个元素
Selector:nth-child(odd/even)匹配符合Selector的第奇数个/偶数个元素

UI元素状态伪类选择器

Selector:link 匹配Selector选择器且未被访问前的元素（通常只能是超链接）
Selector:visited 匹配Selector选择器且已被访问前的元素（通常只能是超链接）
Selector:active 匹配Selector选择器且处于被用户激活（在鼠标点击与释放之前的事件）状态的元素
Selector:hover 匹配Selector选择器且处于鼠标悬停状态的元素
Selector:focus 匹配Selector选择器且以得到焦点的元素
Selector:enabled 匹配Selector选择器且当前处于可用状态的元素
Selector:disabled 匹配Selector选择器且当前处于不可用状态的元素
Selector:checked 匹配Selector选择器且当前处于选中状态的元素
Selector:default 匹配Selector选择器且页面打开时处于选中状态（即使当前没有被选中亦可）的元素

:not伪类选择器

Selector1:not(Selector2) 相当于用Selector1减去Selector2（除了Selector2，Selector1的状态发生变化）

一些CSS的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/outer.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    td{
        border:1px solid black;
        padding:4px;
    }        
    tr:hover{
        background-color: #aaa;
    }
    input:active{
        background-color: blue;
    }
    :focus{
        text-decoration: underline;
    }
    :enabled{
        font-family: "黑体";
        font-weight: bold;
        font-size:14pt;
    }
    :disabled{
        font-family: "隶书";
        font-size:14pt;
    }
    :default{
        outline: #bbb solid 5px;
    }
    </style>
</head>
<body> 
  <table style="width:400px;border-collapse: collapse">
    <tr>
        <td>sffsdf</td>
    </tr>
    <tr>
        <td>sffsdf</td>
    </tr>
    <tr>
        <td>sffsdf</td>
    </tr>
</table>
<button disabled>不可用的按钮</button>
<input type="text" disabled value="bukeyon wenbenkuang ">
<button >可用的按钮</button>
男<input type="radio" value="male" name="gender"/>
女<input type="radio" value="female" name="gender"/>
未知<input type="radio" value="unknown" name="gender"/>

<ul>
    <li>
        <h3>
            1231312312312
        </h3>
       <p>1231313123123213</p>
    </li>
</ul>
</body>
</html>

Solaris秋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS层叠样式表

层叠式样式表CSS（级联样式表）简介Cascading Style Sheet，级联样式单，缩写 css，是用于设计网页风格的，和html一起使用，可以使html网页更加多样化。使用方法1.使用行内样式这种方式将样式行内定义到具体的HTML元素，通常用于精确控制一个HTML元素的风格，在这种方式下，每个css样式只控制单个HTML文件。2.使用内部样式定义这种方式是通过在HTML文档...
复制链接

扫一扫