CSS层叠样式表（Cascading Style Sheets）

最新推荐文章于 2024-01-09 20:49:39 发布

ydqq

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量1w

点赞数

分类专栏：前端技术文章标签： html css

本文链接：https://blog.csdn.net/ydydyq/article/details/51849664

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS简介

CSS全称为：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等。
使用CSS样式通过定义某个样式，可以让不同网页位置的文字有着同一的字体效果。

语法：

p{
    color:blue;
}

p 选择符又称选择位，指明网页中应用样式规则的元素，其他元素不受影响
{} 声明，在大括号内的都是声明
color 属性位
：属性分隔符
blue 值位
; 多条声明时用分号分隔

例：

p{
    font-size:12px;
    color:red;
    font-weight;bold; }

注释

CSS中也有专门的注释语句
格式：

/*注释内容*/

CSS三种引入方式

内联式：直接将CSS样式写入html标签中。

<p style="color:red">字体颜色为红色</p>

嵌入式：

嵌入式写在代码中的head标签中间，集中对指定范围内的代码进行操作。

例：

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

外部式

将CSS写一个独立的以.css文件命名的文件，使用link标签将css样式文件爱你链接到HTML文件内。

例：

<link href="base.css" rel="stylesheet" type="text/css" />

优先级：

内联式 > 嵌入式 > 外部式
离作用代码越近的方式优先级越高

选择器

选择器用来指定样式的作用范围。

css构成：

选择器{
    样式;
}

标签选择器：

直接以html中的标签作为选择器：

<style tye="text/css">
p{
    font-size:12px;
    line-height:1.6em;
}
</style>

类选择器：

类选择器在css中比较常见，首先要在普通标签中设置一个类，类名不可为中文，然后在 style 标签中添加该类名的样式。
类选择器在选择器前要加一个点”.”

例子：

<head>
<style type="text/css">
.shasha{
    color:red;
    font-size:20px;    
}
<style>
</head>
<body>
    <h1 class="shasha">标题</h1>
    <p class="shasha">第一段</p>
    <p> 第二段</p>
</body>

样式会作用于class类型为shasha的标签内容上，类名可以随便取，别用中文。

ID选择器

ID选择器与类选择器大致相同，不同的是：

ID选择起标签内部指定ID；
ID选择器前面不用点”.”，而用井号”#”
ID选择器只能起一个ID名；类选择器可以起多个类名。

例子：

<head>
<style type="text/css">
#shasha2{
    color:red;
    font-size:20px;    
}
<style>
</head>
<body>
    <h1 id="shasha2">标题</h1>
    <p id="shasha2">第一段</p>
    <p> 第二段</p>
</body>

子选择器：

小于这个类的子标签

例子：

.shasha>li{
    border:1px solid red;
}

所有后代标签选择器

小于号代表第一个后代，空格可以指定其所有后代标签

例子：

.shasha li{
    border:1px solid red;
}

通用选择器

通用选择器，选择html文档中的所有标签。

*{
    border:1px solid red;
    font-size:20px;
}

伪类选择符

给标签的某一个状态设定一个类，例如超链接标签可以设置为鼠标停留后显示别的颜色。
最常用的也就是a:hover

a:hover{
    color:red;
    font-size:20px;    
}

分组选择符

选择符中间以逗号隔开，等于同时给多个选择符添加样式

.shasha,#shasha2 span{
    color:red;
}

总结：

普通标签选择：以html中的标签选择
类选择器：给标签添加一个类属性，根据类属性添加样式，可以使用多个类名，多次使用
ID选择器：给标签添加一个ID属性，ID必须是要唯一的，一个文档只能使用一次ID选择器。
子选择器：用小于号分隔，指其选择器中的子标签
包含选择器：用空格分隔，指其选择器中的所有后代标签
通用选择器：对html中所有的标签有效
伪类选择器：给标签的一个动作添加一个选择器
分组选择器：逗号分隔，同时作用给多个标签

CSS的继承，层叠和特殊性

继承：

继承就是指定作用的某个标签其子标签也会被样式作用到。
有些CSS是具有继承性的。

例如：

{color:red;}    color就具有继承性
{border:1px solid red;}    这个样式就没有继承性

权限：

同时给一个元素设置了不同的样式，系统默认会用那个样式呢？答：系统会用权限最高的样式。

标签额权限是相加得出来的：
标签的权限为1，类选择符的权限为10，ID选择符权限最高为100

p{color:red;}    /*权限为1*/
p span{color:green;}    /*权限为 1+1=2*/
.warning(color:white;)    /*权限为10*/
p span.warning{color:purple;}    /*权限为 1+1+10=12*/
#footer .note p{color:yellow;}    /*权限为100+10+1=111*/

得出的权限越大就使用这个样式

层叠

如果同一个标签使用了同样权限的样式，那会使用那个呢？答：两个会同时存在，不过后一个样式会覆盖掉前一个样式。

p{color:red;}
p{color:green;}

重要性 !important

可以给某个样式使用配置最高权限，!important。
这样它的样式就首先使用了。

p{color:red!important;}
注意：
!important要在分号“;”前面

文本样式：

字体

现在网页大部分用的是微软雅黑，或者宋体。

例：

<style type="text/css">
    body{font-family:"Microsoft Yahei"}
    body{font-family:"宋体"}
</style>

字号，颜色

字号的单位叫做像素，颜色可以用三原色调出不同的颜色#000，也可以用英文单词配色

例:

<style type="text/css">
    body{
        font-size:12px;
        color:#666;
    }
</style>

两个属性中间用分号分隔

粗体

p span{font-weight:bold;}

斜体

p a{font-style:italic;}

设置下划线

p a{text-decoration:underline;}

删除线

.oldPrice{text-decoration:line-through;}

缩进

中文书写中，每一段的要空前两个文字位。代码表达如下：

p{text-indent:2em;}
    2em标识文字的2倍大小

行间距（行高）

p{line-height:1.5em}
行高的倍数为1.5倍

字间距

中文字间距：
h1{letter-spacing:50px;}
英文单词间距：
h1{word-spacing:20px;}

排版：居中，居左，居右

对块状文本，图片都能操作

居中

h1{
    text-align:center;
｝

居左

h1{
    text-align:left;
}

居右

h1{
    text-align:right;
｝

CSS盒模型

元素分类：

html中标签元素分为3类：
块状元素；内联元素（行内元素）；内联块状元素

常用块状元素

<div>；<p>;<h1>...<h6>;<ol>;<ul>;<dl>;<table>;<address>;<blockquote>;<from>

常用内联元素

<a>;<span>;<br>;<i>;<em>;<strong>;<label>;<q>;<var>;<cite>;<code>

常用内联块状元素

<img>;<input>

块状元素（块级标签）

每一个块状元素独占一行；
块状元素的高度，宽度，行高以及顶和底边距都可设置；
元素宽度在不设置的情况下，是他本身父容器的百分之百，除非设置一个宽度。

内联元素变块状元素

a{display:block;}

内联元素（内联标签）

与其他元素在一行；
元素的高度，宽度不可修改；
元素的宽度就是包含文字或图片的宽度，不可修改。

块级标签转内联标签：

div{display:inline;}

内联块级标签

内联块级标签是同时包含内内联标签和块级标签特征的标签
特点：
1. 和其他元素在一行
2. 元素的高度，宽度，行高以及顶和底边距都可设置

将元素设置为内联块级元素：

a{display:inline-block;}

盒子模型

我们把所有的块级标签比作一个个盒子，盒子之间可以嵌套
这里写图片描述

congtent与盒子之间的边距叫做内填充（padding）
盒子的边框叫border
盒子与盒子之间的距离叫做外边距（margin）
每一个边距都有top,dottom,left,right 四个属性

盒子的边框
盒子的边框就是围绕盒子的线(border)，可以设置粗细，样式和颜色，三个属性。

border-style(边框样式)常见有：
- dashed（虚线）
- dotted（点线）
- solid（实线）
border-color（边框颜色）中的颜色可设置为十六进制颜色或英文颜色，如：
border-color:#888;
border-width(边框宽度)中的宽度也可设置：
npx 设置为多少像素
下面三种不常用：
thin
medium
thick

例：

div{
    border-width:2px;
    border-style:solid;
    border-color:#888;
}
简写：
div{
    border:2px solid red;
}

上面的例子直接对4个边的边框进行操作，如果只需要对某一边的边框操作的话需要怎么做呢？

border-bottom:2px solid red; 下边框
border-top:2px solid red; 上边框
border-left:2px solid red; 左边框
border-right:2px solid red; 右边框

这样就可以直接对某一条边框进行操作了。

p{
    border-bottom:2px solid red;
}

盒子的宽度和高度
一个块级标签的实际宽度包含内容的宽度，左填充，右填充，左边框，右边框，左边界，右边界的所有宽度的和。
高度也是一样的，因为块级标签的默认占用父容器的百分之百。

盒模型填充（padding）
元素内容的边框之间是可以设置距离的，称之为填充（padding）。填充分为上，右，下，左（顺时针）
盒模型的填充顺序是不可以搞混的。

例子

分开写：
div{
    padding-top:20px;
    padding-right:10px;
    padding-bottom:15px;
    padding-bottom:30px;
}

简写：
div{padding:20px 10px 15px 30px;}

上右下左都是同样的像素时可以这么写：
div{padding:10px;}

上下一样，左右一样时可以这么写：
div{padding:10px 20px;}

边界（margin）
块级与块级之间的边距叫做边界，边界也是按照顺时针方向：上，右，下，左的顺序。

分开写：
div{
    margin-top:20px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:30px;
}

简写：
div{
    margin:20px 10px 15px 30px;
}

四边边距相同时：
div{margin:10px;}

上下相同，左右相同时：
div{margin:10px 20px;}

padding在边框里，margin在边框外

CSS布局模型

流动模型（Flow）；浮动模型（Float）；层模型（Layer）

流动模型（Flow）

Flow是网页默认的布局模型，Flow有以下几个特点：

块级标签都会在所处的包含元素内自上而下顺序眼神分布，块级模块默认的宽度为100%。
内联标签都会在所处的包含元素内从左到有水平分布显示。

浮动模型（Float）
浮动模型可以让一行中显示多个块级模块。

例子；可以让多个块级标签按照从左或从右的顺序排列。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
    float:right
}
#div1{float:left;}
#div2{float:right;}

<div id="div1">1</div>
<div id="div2">2</div>

层模型

层模型分为三种形式：

绝对定位（position:absolute）
相对定位（position:relative）
固定定位（position:fixed）

绝对定位（position:absolute）
想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句使用left,right,top,bottom属性，相对于其最接近的一个具有定位属性的父块含块进行绝对定位。如果不存在这样的包含块，则相对与body元素，即相对于浏览器窗口。

例子：使div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:abbsolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

相对定位（position:relative）
相对于这个块级标签原来的位置做移动。

例：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;   
}

固定定位（position:fixed）
固定定位标识，就爱那个块级标签定位在窗口试图的某个位置，就算下拉网页，其位置也不会改变，类似与购物网站的标题。

例：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

Relative与Absolute组合使用（相对定位和绝对定位组合使用）

使用此组合必要的几个条件：
1. 参考定位的元素必须是相对应定位元素的前辈元素；
2. 参考定位的元素必须加入position:relative;
3. 定位元素加入position:absolute，变可以使用top,bottom,left,right来进行偏移定位。

例：

<head>
    <style>
        .box1{
            width:200px;
            height:200px;
            position:relative;
         }
        .box2{
            position:absolute;
            top:0;
            left:0;
        }
    </style>
<head>
<body>
    <div class="box1">
        <div class="box2">相对应元素</div>
    </div>
</body>