css简介

什么是css？

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

　　样式表定义如何显示 HTML 元素,html标签定义了网页的骨架，而css的作用就是为骨架穿上衣服。并且样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观（也就是为众多骨架同时穿上同一件衣服）。

css语法：

　　css语法主要由两部分组成：选择器和声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

selector  { 
    property1:value1     /*第一条声明*/
    property2:value2　　　/*第二条声明*/
    ……
}

选择器常见的有三种：

　　1 html元素

　　2 id选择器

　　3 class选择器

先来看第一种。html元素可以当选择器，也即是说body p br hr tr td table……都可以作为选择器。

例子1：让所有的段落字体颜色为红色（段落也就是p）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first page</title>
    <style>

        p {
            color: red;
        }

    </style>
</head>
<body>
<h1>test</h1>
<li>haha</li>
<p>hello world</p>
</body>
</html>

段落字体为红色

浏览器显示：

-------------------------------分割线----------------------------------

再来看第二种--id选择器

我们知道，html元素可以使用id属性来标识自身，id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。（ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用）

另外：id 属性只能在每个 HTML 文档中出现一次！！

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first page</title>
    <style>
        #hw {
            color: greenyellow;
        }
    </style>
</head>
<body>
<h1>test</h1>
<li>haha</li>
<p id="hw">hello world</p>
</body>
</html>

让id为hw的元素内的字体颜色为黄绿色

浏览器显示：

-------------------------------分割线----------------------------------

接下来就是第三种选择器--class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用

例子3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first page</title>
    <style>
        .example {
            color: blue;
        }
    </style>
</head>
<body>
<h1>test</h1>
<li>haha</li>
<p class="example">hello world</p>
</body>
</html>

让引用名为example类的元素中字体颜色为蓝色

浏览器显示：

选择器的组合方式

介绍完了选择器类型，那就来说说选择器的组合方式吧。（这一部分不适合初学者看，可以先了解选择符的组合方式，等对css各属性有所了解后再看更好）

在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

1 后代选择符

匹配后面的元素，但仅仅是那些被前面元素嵌套包含的后面元素。例如：div p{} 表示div内嵌套的p元素生效。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    div p{
        color:red;
        background-color: yellow;
    }

</style>
</head>

<body>

<div><p>hello world</p></div>
<p>hello world</p>
</body>
</html>

后代选择符实例

2 子元素选择符

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接子元素的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    div a{
        color:red;
        background-color: yellow;
    }
    div>a{
        color:green;
        background-color: antiquewhite;
    }

</style>
</head>

<body>

<div><p>hello world<a href="http://baidu.com" target="_parent"/>BaiDu</p></div>
<div><p>hello world<a href="http://baidu.com" target="_parent"/>BaiDu</p></div>
<div><a href="http://baidu.com" target="_parent"/>BaiDu</div>

</body>
</html>

子元素选择符与后代选择符比较

3 相邻兄弟选择符---第一个兄弟选择符

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    div+p{
        color:red;
        background-color: yellow;
    }


</style>
</head>

<body>

<div><p>hello world</p></div>
<p>hello world</p>


</body>
</html>

相邻兄弟选择符实例

4 普通兄弟选择符----兄弟连选择符

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    div~p{
        color:red;
        background-color: yellow;
    }


</style>
</head>

<body>

<div><p>hello world</p></div>
<p>hello world</p>
<p>hello world</p>


</body>
</html>

普通兄弟选择符实例

--如何插入样式表

插入样式表主要有三种：

　　1 内部样式表

　　2 外部样式表

　　3 内联样式　　　　

1 内部样式表：

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

在上面的三个例子中，我们都是使用的内部样式表。内部样式表的格式：

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>

2 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

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

　　href: URL 指定被连接文档的地址

　　type：MIME_type 指定被连接文档的MIME类型

　　rel：有很多值（详见下图）指定当前文档与被链接文档的关系

3 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

继承优先级(由低到高)：

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

另外，若多个css样式定义了同一个元素，则按照权值选择css样式，权值排序(由低到高)：

　　1 标签，权值为1

　　2 类选择符，权值为10

　　3 ID选择符，权值为100

我们也可以为某些样式设置最高权值：

　　p{color:red!important;} 注意，分号在!important后面

posted @ 2016-11-09 13:51 樱花下的二哈阅读(248) 评论(0) 编辑收藏举报

刷新页面返回顶部

樱花下的二哈

前端领域一个放荡不羁的哈士奇

css简介

什么是css？

公告