CSS新手学习一(语法、注释、选择器)

  • • 发表于 4年前
  • • 作者 茂茂
  • • 3578 人浏览
  • • 15 条评论
  • • 最后编辑时间 3年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

一、语法

CSS 规则由两个部分构成:选择器声明
选择器:需要改变样式的 HTML 元素
声明:由一个属性和一个值组成

注意:
  1. 一条CSS规则有一个声明或者多个声明组成的声明组;
  2. 声明组用{}(大括号)括起来;
  3. 声明用(分号)结束,声明组中最后一条声明的分号可以省略;(不过我一般没有省略,这个看个人喜好)
  4. 属性和值之间用(冒号)隔开;

例子:

.maomao{
    width:100px;
    height:100px;

}

二、注释

CSS注释以 /* 开始, 以 */ 结束。

例子:

.maomao{
    width:100px;
    height:100px;
    /*background:#000;*/
}

三、选择器

(一)通配符选择器(*)

通配符选择器是用来选择所有元素
*{
    marigin: 0;
    padding: 0;
}
/*我相信大家在reset样式文件中经常见过*/
/*所有元素的margin和padding都设置为0*/

(二)元素选择器

元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等。

例子:

<style type="text/css">
    li{
        marigin: 0;
        padding: 0;
    }
</style>
<ul>
    <li>元素选择器</li>
    <li>元素选择器</li>
    <li>元素选择器</li>
</ul>
/*页面上所有li元素的margin和padding都设置为0*/

(三)id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 # 来定义

例子:

<style type="text/css">
    #maomao{
        width: 100px;
        height: 100px;
        background: #f00;
    }
    /*id为maomao的HTML元素定义宽高为100像素,背景色为红色的样式*/
</style>
<div id="maomao">id 选择器</div>

(四)class 选择器(类选择器)

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
HTML元素以class属性来设置class选择器,CSS 中 class 选择器以 . 来定义。

例子:

<style type="text/css">
    .maomao{
        width: 100px;
        height: 100px;
        background: #f00;
    }
    /*所有class为maomao的HTML元素定义宽高为100像素,背景色为红色的样式*/
</style>
<div class="maomao">class 选择器(类选择器)</div>
<div class="maomao">class 选择器(类选择器)</div>
<div class="maomao">class 选择器(类选择器)</div>

(五)后代选择器

后代选择器(descendant selector)又称为包含选择器,可以选择作为某元素后代的元素;
前面的称为祖先元素,后面的称为后代元素,中间用空格隔开
祖先元素和后代元素之间的层次间隔可以是无限的。

例子:

<style type="text/css">
    div p{
        marigin: 0;
        padding: 0;
    }
    /*页面上所有div元素中所有p元素的margin和padding都设置为0;该例子中所有p元素的margin和padding都为0*/
</style>
<div>
    <p>后代选择器</p>
    <ul>
        <li>
            <p>后代选择器</p>
        </li>
    </ul>
</div>

(六)子元素选择器

后代选择器,只能选择作为某元素子元素的元素;
前面的称为父元素,后面的称为子元素,中间用>(大于号)隔开

例子:

<style type="text/css">
    div>p{
        marigin: 0;
        padding: 0;
    }
    /*页面上所有div元素的所有子元素p的margin和padding都设置为0;该例子中只有第一个p元素的margin和padding都为0,第二个p元素的margin和padding都不为0*/
</style>
<div>
    <p>子元素选择器</p>
    <ul>
        <li>
            <p>子元素选择器</p>
        </li>
    </ul>
</div>

(七)相邻兄弟元素选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

例子:

<style type="text/css">
    li + li{
        marigin: 0;
        padding: 0;
    }
    /*该例子中会把列表中的第二个li和第三个li变为粗体。第一个li不受影响*/
</style>
<ul>
    <li>相邻兄弟元素选择器</li>
    <li>相邻兄弟元素选择器</li>
    <li>相邻兄弟元素选择器</li>
</ul>

(八)选择器分组

选择器分组是将具有相同样式的元素分组在一起,每个选择器之间使用(逗号)。

例子:

<style type="text/css">
    li,h1,p{
        marigin: 0;
        padding: 0;
    }
    /*该例子中会把所有li元素、h1元素、p元素的margin和padding都设置为0。*/
    /*这个选择器我相信大家在reset样式文件中也经常见过*/
</style>
<ul>
    <li>选择器分组</li>
    <li>选择器分组</li>
    <li>选择器分组</li>
</ul>
<div>
    <h1>选择器分组</h1>
    <p>选择器分组</p>
</div>
注意:
  1. id和class的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
  2. id 属性只能在每个 HTML 文档中出现一次。具体原因XHTML:网站重构
喜欢的小伙伴们就打赏下(嘿嘿)
上期回顾:CSS回顾复习三(CSS书写规范、顺序和命名规则——CSS书写规范)
下期内容:CSS新手学习二(CSS创建和CSS执行顺序)
分享到:
评论区(共15条评论)
15条评论
Ctrl+Enter
作者

茂茂

茂茂

APP:2 帖子:16 回复:198 积分:13513

已加入社区[1357]天

啦啦啦

作者详情》
Top