CSS(1)---css语法、css选择器

时间 2019-11-06

标签 css 语法选择器栏目 CSS 繁體版

原文原文链接

CSS(1)---css语法、css选择器

1、CSS语法

一、CSS语法

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。css

属性是您但愿设置的 样式属性。每一个属性有一个属性值。属性和属性值被冒号分开。html

示例测试

<!--  这行代码的做用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素 -->
     h1 {color:red; font-size:14px;}
  <!-- 在这里，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 -->

2、CSS三种引入方式

CSS三种引入方式有：行内样式、内部样式表、外部样式表。字体

一、行内样式

它是经过标签的 style属性 来设置元素的样式，url

基本语法示例：spa

<!--使用行内样式引入CSS-->
 <body>
     <p style="color:blue; font-size:40px">欢迎访问雨点的博客。</p>
 </body>

建议 实际在写页面时不提倡使用，在测试的时候可使用。ssr

二、内部样式表

在 style标签 中书写CSS代码。style标签写在head标签中。设计

其基本语法示例：code

<head>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中。有两种方式：连接式、导入式。htm

基本语法示例：

<head>
  <!--连接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>

四、三者比较

3、CSS基础选择器

基础选择器能够分为: 标签选择器、类选择器、id选择器、通配符选择器。

一、标签选择器

标签选择器（元素选择器）是指用 HTML标签名称 做为选择器，按标签名称分类，为页面中同一类标签指定统一的CSS样式。基本语法示例：

<!-- 示例 这里h1就是标签-->
h1 {color:red; font-size:14px;}

标签选择器最大的优势是能快速为页面中同类型的标签统同样式，同时这也是他的缺点，不能设计差别化样式。

二、类选择器

类选择器使用 .（英文点号）进行标识，后面紧跟类名。

基本语法示例

<head>
    <style type="text/css">
        .center {text-align: center}
   </style>
</head>

注意：类名的第一个字符不能使用数字！

三、 id选择器

id选择器使用 # 进行标识，后面紧跟id名，其基本语法示例：

<head>
    <style type="text/css">
        #red {color:red;}
        #green {color:green;}
   </style>
</head>

id选择器和类选择器区别

类选择器：比如人的名字,是能够屡次重复使用的。

id选择器：比如人的身份证号码,是惟一的不能重复。

四、通配符选择器

通配符选择器用 * 号表示，他是全部选择器中做用范围最广的，能匹配页面中全部的元素。

例以下面的代码，使用通配符选择器定义CSS样式，清除全部HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

4、CSS复合选择器

复合选择器是由两个或多个基础选择器，经过不一样的方式组合而成的,目的是为了能够选择更准确更精细的目标元素标签。

复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类选择器。

一、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如p.className。

基本语法

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        div.red {  /*交集选择器  既要知足是 div 标签 又要知足class叫 red*/
            color: red;
        }
    </style>
</head>
<body>
    <div>交集选择器</div>
    <div class="red">交集选择器</div>  <!-- 只有这个会变红 -->
    <p class="red">交集选择器</p>
</body>
</html>

二、并集选择器

并集选择器，只要知足一个就能够。好比 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 这三个选择器都会执行颜色为红色。一般用于集体声明。

示例

<!DOCTYPE html>
<html>
<head>
    <title>并集选择器</title>
    <style>
    /*1. 只要知足其中一个就会变红*/
    div, p, span {   /*并集选择器  用逗号隔开 */
        color: red;
    }
    </style>
</head>
<body>
    <div>并集选择器</div>
    <p>并集选择器</p>
    <span>并集选择器</span>
    <h1>并集选择器</h1>  <!-- 只有这一个不会变红 -->
</body>
</html>

三、后代选择器

后代选择器又称为包含选择器，通常标签里面又会包含标签,那么内层标签就为外层标签的后代。

示例

<!DOCTYPE html>
<html>
<head>
    <title>后代选择器</title>
    <style>
    div p  {   /* 后代选择器  p 必定是 div 的孩子 */
        color: red;
    }
    </style>
</head>
<body>
    <div> 后代选择器 </div>
    <div> 
        <p>后代选择器</p>   <!-- 只有它变红 -->
    </div>
</body>
</html>

四、子元素选择器

子元素选择器只能选择做为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行链接，注意，符号左右两侧各保留一个空格。

后代选择器跟子元素选择器的区别

后代能够是亲儿子、亲孙子、亲重孙子之类的，而子代只是亲儿子。因此后代选择器的范围更广些。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    ul li > a {  /*这里表示 ul的后代中的li的亲儿子才会有效  */   
            color:red;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">一级菜单</a>    <!-- 只有这个是li的亲儿子，因此只有它会变红 -->
            <div>
                <a href="#">二级菜单</a>  <!-- 这三个只是li的后代但并非亲儿子，因此不会变红 -->
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
            </div>
        </li>
    </ul>
</body>
</html>

五、相邻兄弟选择器

若是须要选择紧接在另外一个元素后的元素，并且两者有相同的父元素，可使用相邻兄弟选择器

例如，若是要增长紧接在 h1 元素后出现的段落的上边距，能够这样写：

h1 + p {margin-top:50px;}

这个选择器读做：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

六、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。好比给连接添加特殊效果，好比能够选择第1个，第n个元素。

为了和咱们刚才学的类选择器相区别，类选择器是一个点好比 .className {} 而咱们的伪类用 2个点就是冒号好比 :link{}。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    a:link {  /* 未访问过的链接状态*/
        color: #3c3c3c;
        font-size: 25px;
        text-decoration: none;  /*取消下划线*/
        font-weight: 700;
    }
    a:visited {  /*这个连接咱们已经点过的样子  已访问过连接*/
        color: orange;
    }
    a:hover {  /*鼠标通过链接时候的样子*/
        color: #f10215;
    }
    a:active {  /*鼠标按下时候的样子*/
        color: green;
    }

    </style>
</head>
<body>
    <a href="http://www.oujiong.com">点击</a>
</body>
</html>

参考

有关CSS选择器上面也只是讲了一部分，更多的能够看w3school官方文档。当你须要怎么样的选择器到这里查找就能够。

一、w3school-CSS 教程

二、CSS 选择器参考手册

你若是愿意有所做为，就必须善始善终。(3)

CSS(1)---css语法、css选择器

CSS(1)---css语法、css选择器

1、CSS语法

一、CSS语法

2、CSS三种引入方式

一、行内样式

二、内部样式表

三、外部样式表

四、三者比较

3、CSS基础选择器

一、标签选择器

二、类选择器

三、 id选择器

四、通配符选择器

4、CSS复合选择器

一、交集选择器

二、并集选择器

三、后代选择器

四、子元素选择器

五、相邻兄弟选择器

六、 伪类选择器

参考

六、伪类选择器