CSS笔记(一)

CSS

CSS 语法

语法格式

选择器 {属性名:属性值;属性名:属性值;}

CSS 的一些简单常见的属性

• 括号中内容为快捷键

字体颜色：（c）

color:red;

字号大小：（fos）

font-size:40px;

背景颜色：（bgc）

background-color: blue;

加粗：（fwb）

font-weight: bold;

不加粗：（fwn）

font-weight: normal;

斜体：（fsi）

font-style: italic;

不斜体：（fsn）

font-style: normal;

下划线：（tdu）

text-decoration: underline;

没有下划线：（tdn）

text-decoration:none;

样式表

• 行内样式：在某个特定的标签里采用 style属性。范围只针对此标签。
• 内嵌样式表：在页面的 head 里采用<style>标签。范围针对此页面。
• 引入外部样式表 css 文件的方式。分为两种：
• 1、采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
• 2、采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

CSS 的四种基本选择器

CSS 的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

• 标签选择器：针对一类标签
• ID 选择器：针对某一个特定的标签使用
• 类选择器：针对你想要的所有标签使用
• 通用选择器（通配符）：针对所有的标签都适用

1、标签选择器：选择器的名字代表 html 页面上的标签

标签选择器，选择的是页面上所有这种类型的标签

p{ font-size:14px; }

2、ID 选择器：规定用#来定义

针对某一个特定的标签来使用，只能使用一次

#mytitle{ border:3px dashed green; }

3、类选择器：规定用圆点.来定义

.one{ width:800px; }

1、类选择器可以被多种标签使用。
2、同一个标签可以使用多个类选择器，用空格隔开。

上面这三种选择器的区别：

• 标签选择器针对的是页面上的一类标签。
• ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。
• 类选择器可以被多种标签使用

4、通配符*：匹配任何标签

通用选择器，将匹配任何标签。

* {
   
    margin-left: 0px;
    margin-top: 0px;
}

CSS 的几种高级选择器

高级选择器：

• 后代选择器：用空格隔开
• 交集选择器：选择器之间紧密相连
• 并集选择器（分组选择器）：用逗号隔开
• 伪类选择器

1、后代选择器: 定义的时候用空格隔开

<style type="text/css">
    .div1 p {
     
        color: red;
    }
</style>

空格就表示后代。.div1 p 表示.div1的后代所有的p。

2、交集选择器：定义的时候紧密相连

定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如div.haha，再比如p.special。

如果后一个选择器是类选择器，则写为div.special；如果后一个选择器 id 选择器，则写为div#special。
注: 交集选择器没有空格。没有空格的div.red（交集选择器）和有空格的div .red（后代选择器）不是一个意思。

3、并集选择器：定义的时候用逗号隔开

三种基本选择器都可以放进来。

p,
h1,
#mytitle,
.one {
   
    color: red;
}

1.子代选择器，用符号>表示

div > p {
   
    color: red;
}

div 的儿子 p。和 div 的后代 p 的截然不同。

能够选择：

<div>
    <p