CSS基础（一）

最新推荐文章于 2024-08-20 13:42:14 发布

mlh110

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量321

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/mlh110/article/details/53637068

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS基础（一）

基本介绍

CSS：Cascading Style Sheets
HTML控制页面结构
CSS定义HTML中的元素如何显示，其可以将页面样式与内容相分离

CSS的三种类型

内联样式
即在tag标签中增加style属性

     <p style="color:red;background-color:white">
      This is a paragraph.
     </p>

内部样式表
定义在头部的style元素中

<html>
    <head>
        <style>
             p{
                color:red;
                background-color:white;
             }
         </style>
    </head>
    <body>
        <p>This is a paragraph.</p>
    </body>
</html>

外部样式表

CSS文件通过link标签链接到html文件中，link元素在html头部：

<!--main.html-->
<html>
    <head>
        <link rel="stylesheet" href="example.css">
    </head>
    <body>
        <p>This is a paragraph.<p>
    </body>
</html>

/*example.css*/
p{
    color:red;
    background-color:white;
    font-size:16px;
}

href中可以时绝对路径也可以时相对路径，上面的例子用的是相对路径，css文件和html文件在相同的目录里。
这里的css样式里设置了字体大小，注意不要在属性值与单位之间留有空格，若使用”font-size:16 px;“，它仅在 IE 6
中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，越往下越拥有更高的优先权。

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

CSS基本语法

CSS样式三要素：选择器（selector）、属性（property）、值（value）。

CSS样式三要素

选择器（selector）

类型选择器（type selector）

也叫元素选择器。
选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
其也可以为 XML 文档中的元素设置样式。

/*将匹配页面中所有的p元素*/
p{
    color:red;
    font-size:130%;
}

id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。

The html:

<div id="intro">
    <p>This is a paragraph.</p>
</div>

The CSS:

#intro{
    color:red;
    font-size:130%;
}

Class选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
类选择器可以在一个页面中使用多次

The html:

<div class="first">
    <p>This is a paragraph.</p>
</div>

The CSS:

.intro{
    color:red;
    font-size:130%;
}

要点：

id和class选择器的名字都不能以数字开头！
class选择器中可以在一个元素中使用多个类。
<p class="important first">This is a paragraph.</p>
.important{color:red;}
.first{font-weight:bold;}

如果上例中first类中同样对文字颜色进行了定义，那会使用first中定义的颜色，即在样式表中按照书写顺序后面定义的会覆盖掉前面的。
如果还想特别对同时使用两个类的元素做特别定义，可以使用
.important.first{color:blue;} /*注意类名之间不要有空格*/
且其比单独定义的具有更高的优先级，即不论其位于.important上面还是下面都会优先使用它定义的蓝色。
class=”first “双引号里面可以有空格可以正确对应到first类，但id双引号里不允许有空格。
类选择器可以结合元素选择器来使用。
p.important{color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”
<p class="important">This is a paragraph</p>
注意：
.important p{color:red;}与上面的并不一样，其解释为”class属性值为important的元素内部的所有段落“
即：
<div class="important"><p>This is a paragraph</p></div>
id与class：

id具有唯一性，可以用来标识页面元素的唯一身份，一般用于大的页面布局；class可以使用多次，方便对同一种类的元素样式进行定义。且id的优先级要高于class。
id可用作锚定位。

mlh110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（一）

CSS基础（一）目录CSS基础一目录基本介绍CSS的三种类型CSS基本语法选择器selector基本介绍CSS：Cascading Style Sheets HTML控制页面结构 CSS定义HTML中的元素如何显示，其可以将页面样式与内容相分离CSS的三种类型内联样式即在tag标签中增加style属性 <p style="color:red;background-c
复制链接

扫一扫

专栏目录