0x1 CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)，分为内部样式和外部样式

是一种标记语言

内部样式表是定义在head元素标签内的一种“特征”定义，和html的内部样式相同，形式类似函数

外部样式表是定义在外部的CSS文件中，作用与内部样式相同

内联样式表是定义在标签元素内部的样式表

CSS语法规范

选择器、一条或多条声明

选择器的意思是，选择谁改样式，声明是改什么样式

sJRn6s.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    /*选择器{样式}
    给谁改样式*/
p{
	color:red;
} 
</style>
</head>

<body>
<p>Hello World!</p>
</body>
</html>

选择器是用于指定CSS样式的HTML标签

属性和属性值是以键值对的形式出现

CSS一定要加分号;

属性和属性值之间有：

CSS代码风格

书写样式格式

紧凑型

p{color:red;}

展开式

p{
	color: red;
}
  • 样式大小写

采用小写

空格规范

属性前面，冒号后面保留空格

选择器和大括号后也要保留空格

p {
	color: red;
}

0x2 CSS选择器

选择器的作用

针对不同的标签，有针对的进行选择

p {  
    color: red;
}

上述代码即把所有p段落标签定义为相同样式

选择器分类

基础选择器和复合选择器

基础选择器是由单个选择器组成

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器

以HTML标签名称作为选择器，例如盒子div 或span

设置统一，不能差异化设置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    /*选择器{样式}
    给谁改样式*/
    p {
        color: red;
    } 
</style>
</head>

<body>
<p>Hello World!</p>
</body>
</html>

类选择器

语法：

点加类名，类名任取

.类名 {
    color： red; 
}

结构需要class属性来调用该类

.cat {
    color： red; 
}

<p class="cat">Hello World!</p>

一般结构都可以调用

不要使用中文、数字命名

div 就是一个盒子，用来装网页内容的

相当于通过不同方式引用样式。id和class差不多，只不过是引用的方式不同，都可以让多个段落引用相同的样式。

class

-----------------第一种-------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>
--------------------第二种------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

类选择器-多类名

可以给一个标签指定多类名

统一修改方便

<style>
    .big {
        font-size:10px;  #公共的定义一个选择器
    }        
    .red {
        color:red;          
    }
    .gray {
        color:gray;
    }
</style>

<div class="big red"> 多类名用空格隔开 </div>  #可以有多个类名
<div class="big gray"> 多类名用空格隔开 </div>

id选择器

必须要用#开头，用id属性调用，只能调用一次

并且不能多类名使用，一般和js搭配

<style>
#para1 {
	text-align:center;
	color:red;
} 
</style>

<body>
    <h1 id="para1">Hello World!</h1>
    <p id="para1">这个段落不受该样式的影响,才怪。</p>
    <p id="para1">Hello World!</p>
</body>

通配符选择器

选取页面所有元素(标签)

语法

* {
  属性值1;属性值2;
}

不需要调用，自动修改所以元素样式

* {
  margin: 0;
  padding: 0;
}

总结：

sYssGd.md.png

0x3 CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)

字体系列

CSS使用font-family属性定义文本的字体系列

p {font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft Yahei","微软雅黑";}
<head>
    <style>
        h2 {
            font-family:'微软雅黑'; 可以使用中文，但英文兼容性更好
        }
        p {
            font-family：'Microsoft YaHei',Times,serif;
        } 
        #系统根据上述的字体，首先使用带’‘的，如果用户没有则依次用后面的字体
    </style>
</head>
<body>
     <h2>
         标题
    </h2>
    <p>
        段落
    </p>
</body>

尽量使用系统默认自带字体

常见字体：‘Microsoft YaHei’,tahoma,arial,’Hiragino Sans GB’;

字体大小

p {
  font-size:20px;  像素
}

谷歌浏览器默认16px，不同浏览器默认不同

可以给body指定整个页面

字体粗细

CSS使用font-weight属性设置文本粗细

.bold {
  font-weight:bold;  加粗  
  font-weight:700;   400为默认
}
属性值 描述
normal 默认值
bold 定义粗体
100-900 400等同于normal，而700等同于bold 注意这个数字后面不跟单位

文字样式

CSS 的 font-style 属性

p {
   font-style：italic;
}
em {
   font-style：normal;
}
<em> 表示斜体标签 </em>  将不再倾斜

字体符合属性

可以综合每个属性，顺序不能变，固定顺序，空格隔开

必须保留font-size和font-family ，其他可省略

body {
   font:font-style font-weight font-size/line-height font-family;
}

字体属性总结

sYhexg.png

文本属性

文本颜色

div {
  color:red;
}

预定义的颜色值(英语单词)、十六进制、RGB代码

加一位可改透明度

对齐文本

div {
    text-align:center;
}

left左对齐（默认），right右对齐，center居中对齐

装饰文本

text-decoration 属性添加文本装饰

下划线overline、删除线line-through、默认none、下划线underline

a {
  #取消下划线
  text-decoration：none;
}

<a href="#"> </a> 下划线

文本缩进

text-indent属性，将段落首行缩进

text-indent:20px;  可以为负，文字会看不见

text-indent:2em;  相对单位，即当前元素一个文字的大小

行间距

line-height属性设置行间距离

line-height:26px;

stV474.png

文本属性总结

stZwgx.png

0x4 插入样式表

根据书写的位置不同可分为三大类：

外部样式表(External style sheet)（链接式）

内部样式表(Internal style sheet) （嵌入式）

行内样式表(Inline style)

外部样式表

当样式需要应用于多个页面时，一般选择外部样式表,用外部的.css文件。

新建CSS文件

div {
   color:pink;
}

使用link标签引入文件

<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>

内部样式表

页面内部需要一个特殊的样式时，一般用内部样式表

理论上