前端之旅——CSS

CSS 定义

　　CSS是Cascading Style Sheets 的简称，中文称是层叠样式表

　　属性和属性值用冒号隔开，以分号结尾

CSS 四种引入方式

　　1.行内式

　　　　行内式是在标签的style属性中设定CSS样式

<div style="..."><div>

　　2.嵌入式

　　　　嵌入式是将CSS样式集中写在网页的<head>头标签的<style></style>标签中

<head>
    ...
    <style type="text/css">
        ....
    </style>
</head>

　　3.导入式

　　　　将一个独立的.CSS文件引入HTML文件中，导入式使用@import 引用外部CSS文件

　　导入式会在整个网页装载完成后再装载CSS文件

<head>
   ...
     <style type="text/css">
        @import " css文件路径"

    </style>
</head>

　　4.链接式（导入就用这种）

　　　　将一个独立的 .css 文件引入到HTML文件中，使用<link>标记在<head>标记中

　　　链接式会以网页文件主体装载前装载CSS文件

　　rel = stylesheet (告诉它是层叠样式表)

<head>
...
    <link href="my.css"  rel="stylesheet" type="text/css">

</head>

样式应用顺序：

　　如果外部样式、内部样式、内联样式同事应用于同一个元素，属性不一样的话就会以合并的方式呈现。

　　如果是应用于同一个元素且同一个属性。他们的权重是，行内样式 > 内部样式 > 外部样式

有个例外的情况：如果外部样式放在内部标签的后面，外部标签将会覆盖内部标签

基本选择器：

1.通用元素选择器

*匹配应用到的所有标签。

*{  color:red }

2.标签选择器

匹配所有使用 xx 标签的元素（可以匹配到所有标签）

div{ color:yellow}

3.类选择器

匹配所有class属性中包含info的元素。

语法：点.类名{样式}（类名不能以数字开头，类名要区分大小写）

.mycolor{color:yellow>
<div class="mycolor">nick</div>

4.id 选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）

　　语法：#id 名{} （id 不能以数字开头）

#mycolor {color:yellow}
<div id="mycolor">NICKE<div>

组合选择器：

1.多元素选择器

　同时匹配h1，h2 标签，之间用逗号分隔

h1,h2{color:yellow}
<h1>牛魔大力陷滂沱</h1>
<h2>虎魔狂乱心不死</h2>

2.后代元素选择器

匹配所有div 里的 p 标签之间用空格分隔

div p {color:yellow}
<div>
<p>nick</p>
<div>
<p>123</P> 
</div>   

</div>

3.子元素选择器

匹配所有div标签里嵌套的子标签p标签，之间用>分隔

只找儿子

4.毗邻元素选择器

匹配所有紧随div标签之后的同级标签p，之间用+分隔（只能匹配一个）

div + p{color:yellow}
<div>123</div>
<p>nick</p>

属性选择器：title标题可以是class id 等

1.[title]&P[title]

　　设置所有具有title属性的标签元素；

　　设置所有具有title属性的p标签元素。

设置所有具有title属性的标签元素；
[title]
{color:yellow}
p[title]
设置所有具有title属性的p标签
{color;yellow}
<div title>nick</div>
<p title>nick</p>

2.[title=nick]

设置所有title属性等于"nick"的标签元素

[title="nick"]
{color:yellow}

3.[title~=nick]

设置所有title属性值中，有一个值等于nick的标签元素

[title~="nick"]
{color:yellow;}
<p title="nick asd cas sad">nick</p>
<p title="group askii append">juex</p>

4[title|=nick]

设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“nick”开头的标签元素

[title="nick"]
{color;yellow}
<p title="nick-asdsad-asd">nick</p>

5.[title^=nick]

设置属性值以指定值开头的每个标签元素

<title^="nick">
{color:yellow;}
<p title="nickdasds asd">nick</p>

6.[title$=nick]

设置属性值以指定值结尾的每个标签元素。

[title$="nick"]

{color:yellow}

7.[title *=nick]

设置属性值中包含指定值得每一个元素

[title="nick"]
{color:yellow}
<p title="snickda">nick</p>

伪类选择器

猜你喜欢