2.……集合

学前须知

块元素

指的是里面可以嵌套其他标签的元素

如：h1~h6 , p , div（接下来会经常用到） , ol , ul……

行内元素

合理的使用行内元素会为css的引入带来极大的便利

如：

行内元素	说明
strong	粗体元素
em	斜体元素
a	超链接
span（接下来会超级常用）	CSS的定义样式

id属性于class属性

id属性具有：唯一性，class属性为：“类”。

即使用方法为：

<一般标签 id="阿巴阿巴">一般标签（即非自闭合标签）>

<一般标签 class="阿巴阿巴">

引入CSS的三种常见方式

css相当于网页的皮肤

同时三种引入方式编译器会采用就近原则，如果有多个操作重复，就会采用最近的那个。

外部引入（推荐）

rel 取值固定为：styiesheet

type 取值固定为：text/css

href="文件路径"指的是css文件的位置。

<link/>外部引入标签
语法：
<link rel="styiesheet" type="text/css" href="文件路径"/>

内部引入

<style type="text/css">
    ……
style>

行内引入

<div style="coloe:red">
    ……
div>
<div style="coloe:blue">
    ……
div>

选择方式

如何准确的选择css要套用到的代码，以下有5种常见的方式

元素选择器

使用起来最为简单粗暴

使用方式：元素名{属性:属性值;属性:属性值;}

<style type="text/css">
    div{coloe:red;}
style>

即，将此页面所有的div标签内容变为红色。

id选择器

使用前要先给目标元素设置一个id值，可以精准的选择对象

使用方式：#元素名{属性:属性值;属性:属性值;}


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            #a1{coloe:red;}
        style>
    head>
    <body>
        <div>阿巴阿巴div>
        <div id="a1">墨隐好帅div>
        <div>墨隐超级帅div>
    body>

即第二行的文字变成红色。

class选择器

使用前要先给目标元素设置一个class值，可以大范围的选择对象

使用方式：.元素名{属性:属性值;属性:属性值;}


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            .b1{coloe:red;}
        style>
    head>
    <body>
        <div class="b1">阿巴阿巴div>
        <div>墨隐好帅div>
        <p class="b1">墨隐超级帅p>
    body>

即第一行和第三行的文字变成红色。

后代选择器

使用方式：#块元素子元素{属性:属性值;属性:属性值;}


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            #div p{coloe:red}
            #div span{coloe:blue;}
        style>
    head>
    <body>
        <div>
            <p>阿巴阿巴p>
            <span>阿巴阿巴span>
        div>
    body>

即第一行为红色，第二行为蓝色。

群组选择器

使用方式：元素名,元素名,……{属性:属性值;属性:属性值;}


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            p，span{coloe:red}
        style>
    head>
    <body>
        <div>
            <p>阿巴阿巴p>
            <span>阿巴阿巴span>
        div>
    body>

即第一第二行为红色。

字体

类型(font-family)

当第一个字体类型无法显示时，编译器才会用第二种

元素名{font-family:字体1,字体2,字体3……;}

大小(font-size)

元素名{font-size:像素值（px）;}

粗细(font-weight)

属性值	数字值	说明
lighter	100	较细
normal	400	正常（默认值）
bold	700	较粗
bolder	900	很粗

元素名{font-weight:100;}
元素名{font-weight:400;}
元素名{font-weight:700;}
元素名{font-weight:900;}

风格(font-style)

属性值	说明
normal	正常
italic	斜体
oblique	斜体

有些特殊的字体可能用italic或oblique无法显示，所以出现互补的进行使用。

元素名{font-style:normal;}
元素名{font-style:italic;}
元素名{font-style:oblique;}

颜色(coloe)

元素名{coloe:red;}
元素名{coloe:#FFFFFF;}

段落

首行缩进(text-indent)

元素名{text-indent:像素值;}

水平对齐(text-align)

元素名{text-align:left;}左对齐（默认）
元素名{text-align:center;}居中
元素名{text-align:right;}右对齐

文本修饰(text-decoration)

元素名{text-decoration:none;}去除下划线（默认）
元素名{text-decoration:underline;}下划线
元素名{text-decoration:line-through;}中划线
元素名{text-decoration:overline;}顶划线

字母大小写(text-transform)

元素名{text-transform:none;}无变换（默认）元素名{text-transform:uppercase;}大写元素名{text-transform:lowercase;}小写元素名{text-transform:capitalize;}首字母大写

行高(line-height)

元素名{line-height:像素值;}

间距

字母间距(letter-spacing)

元素名{letter-spacing:像素值;}

文字间距(word-spacing)

元素名{word-spacing:像素值;}

边框border

宽 border-width

外观 border-style

属性值	说明
none	无样式
dashed	虚线
sollid	实线（默认）

颜色 border-color

简写形式

border:1px solid red;
等于
border-width: 1px;
border-style: solid;
border-color: red;

局部样式

上 border-top

下 border-bottom

左 border-left

右 border-right

使用方法：

border-top-width:1px;
border-top-style:solid;
border-top-color:red;

简写形式：

border-top:1px solid red;

列表样式

有序列表list-style-type

属性值	列表符号
decimal	1、2、3……（默认值）
lower-roman	i、ii、iii……
upper-roman	I、II、III……
lower-alpha	a、b、c……
upper-alpha	A、B、C……

无序列表list-style-type

disc	实心圆（默认值）
circle	空心圆
square	方块