CSS

最新推荐文章于 2023-06-04 10:30:00 发布

Pesally

最新推荐文章于 2023-06-04 10:30:00 发布

阅读量453

点赞数

文章标签： css html 浏览器

CSS全称“层叠样式表(Cascading Style Sheets)”它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

如

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

CSS代码语法
排版
- 文字排版
- 段落排版
元素分类
盒模型
基本布局模型
水平居中设置
- 行内元素
- 块状元素
  - 定宽块状元素
  - 不定宽块状元素
垂直居中设置
- 父元素高度确定的单行文本
- 父元素确定的多行文本
  - 方法一
  - 方法二
图层
光波变化

CSS代码语法

基本结构

css样式由选择符和声明组成，声明由属于和值组成
这里写图片描述
1. 选择符：选择器，指明网页中要应用样式的元素。
2. 声明：{}之间为声明，属性和值之间以英文:分隔。当有多条声明时，可用英文;分隔

注释

/*注释语句*/

实现方式

内联式

直接将代码写在现有的HTML标签中，要写在开始标签中，且要写在style=""的""中，多条代码用;隔开
如

<p style="color:red;font-size:12px">这里的文字是红色</p>

嵌入式

把CSS代码写在<style type="text/css"></style>之间

嵌入式CSS样式必须写在<style></style>之间，且一般情况下写在<head></head>之间

外部式

把css代码写一个单独的外部文件中，这个css样式文件以.css为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<head>
    ...
    <link href="base.css" rel="stylesheet" type="te。xt/css" />
    ...
</head>

注意：
1. css样式文件名称以有意义的英文字母命名
2. css样式文件名称以有意义的英文字母命名
3. <link>标签位置一般写在<head>标签之内

三种方法的优先级

内联式>嵌入式>外部式

嵌入式>外部式有一个前提：嵌入式的位置在外部式后
总之，就近原则。
以上规则前提：css样式权值相同

选择器

标签选择器

选择html中的标签，如<html>、<body>等

类选择器

.类选择器名{代码;}

英文.开头
可任意起名，拒绝中文名

ID选择器

为标签设置id=”ID名称”，而不是class=”类名称”。
ID选择符的前面是井号（#）号，而不是英文圆点（.）。

类选择器与ID选择器的不同

ID选择器只能在文档中使用一次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现。

子选择器

用于选择指定标签元素的第一代子元素。
例如

.food>li{
    border:1px solid red;
    /*这行代码会使class名为food下的子元素li加入红色实线边框。*/
}

包含（后代）选择器

加入空格，用于选择指定标签元素下的后辈元素

子选择器选择直接后代，后代选择器作用于所有后代

.first span{color:red;}

通用选择器

使用*，匹配html中所有标签元素，

* {color:red;}/*任意标签元素字体颜色全部设置为红色*/

伪类选择符

允许给html不存在的标签设置样式。
如给html中的一个标签元素的鼠标划过的状态来设置字体颜色

a:hover{color:red;}

以上代码使 a <script type="math/tex" id="MathJax-Element-1">a</script>标签鼠标滑过的状态设置字体颜色变红

分组选择符

为html中多个标签元素设置同一个样式

h1,span{color:red;}/*为h1、span标签同时设置字体颜色为红色*/

权值

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

层叠

若对于同一元素有多个CSS样式且其权值相同，处在最后面的CSS样式会被应用

重要性

给予最高权值!important
如

p{color:red!important;}

注意：!important要写在分号前

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，
但!important优先级样式是个例外，权值高于用户自己设置的样式

排版

文字排版

字体

body{font-family:"Microsoft Yahei";}

字号、颜色

body{font-size:12px;color:#666}

粗体

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;}

字间距

文字、字母间距 letter-spacing

h1{
    letter-spacing:50px;
}

单词间距word-spacing

h1{
    word-spacing:50px;
}

对齐

为块状元素的文本、图片设置居中，可使用text-align

h1{
    text-align:center;/*居中*/
    /*text-align:left 居左*/
    /*text-align:right 居右*/
}

元素分类

元素分为三类

块状元素
内联元素（行内元素）
内敛块元素

/*常用块状*/<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
/*常用内联*/<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
/*常用内联块*/<img>、<input>

块级元素

设置display:block就是将元素显示为块级元素。

a{display:block;}/*将内联元素转换为块状元素*/

块状元素的特点：
1. 每个块状元素都从新的一行开始，其后的元素也另起一行
2. 元素高、宽、行高、顶底边距都可设置
3. 宽度若没有设置，则为本身父容器的100%

内联元素

块状元素可通过display:inline转换为内联元素。

div{
    display:inline;/*将块状元素div转换为内联元素*/
}

内联元素的特点：
1. 与其他元素同行
2. 高宽、顶底边距不可设置
3. 元素宽度即为它包含的文字或图片的宽度，不可改变

内联块状元素

同时具备内联元素、块状元素的特点display:inline-block

a{
    display:inline-block;
    height:20px;
    width:20px;
    background:green;
    text-align:center;
}

特点：
1. 与其他元素同行
2. 高宽、行高、顶底边距可设置

盒模型

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)

div{
    border:2px solid red;/*边框2px、样式实心、颜色为红色*/
}
/*以上为缩写*/
/*以下为完整格式*/
div{
    border-width:2px;/*粗细*/
    border-style:solid;/*边框*/
    border-color:red;/*样式*/
}

边框

border-style：dashed虚线、dotted点线、solid实线
border-color：可设16进制颜色
border-width：thin、medium、thick，最常用像素

只为一个方向设置边框

div{border-botton:1px solid red;}/*只设置下边框*/

宽度和高度

css内定义的宽（width）和高（height），指的是填充以里的内容范围。
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
这里写图片描述

填充

padding

div{padding: 20px 10px 15px 30px;}/*上、右、下、左（顺时针）*/

div{padding:10px;}/*上下左右都为10px*/

div{padding:10px 20px;}/*上下10px，左右20px*/

边界

margin
格式同padding

基本布局模型

流动模型
浮动模型
层模型

流动模型

默认的网页布局
特征：
1. 块状元素在所处的包含元素自上而下按顺序垂直延伸分布，因为默认状态下块状元素宽度为100%。实际上，块状元素都会以行的形式占据位置。
2. 内联元素在所处的包含元素从左到右水平分布显示

浮动模型

实现并排

/*实现两个div元素一行显示*/
div{
    width:20px;
    height:100px;
    border:2px red solid;
    float:left;
}
<div></div>
<div></div>

层模型

使用定位(position)属性
层模型三种形式
1. 绝对定位position:absolute
2. 相对定位position:relative
3. 固定定位position:fixed

绝对定位

position:absolute将元素从文档中拖出来，用left、right、top、bottom相对于最近的一个具有定位属性的父包含块进行决定定位。若不存在这样的包含块，则相对body元素，即浏览器窗口定位。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}/*div元素相对浏览器窗口右移100px，下移50px*/

相对定位

position:relative通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
过程：
1. 先按static(float)方式生成一个元素（浮动）
2. 然后相对以前的位置移动，偏移前的位置保留不动

#div1{
    width:100px;
    height:100px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}/*相对于以前位置向下移动50px，向右移动100px*/

固定定位

fixed表示固定定位，与absolute相似，但它相对视图（屏幕内的网页窗口）移动。固定定位的元素始终位于浏览器窗口内视图的某个位置，不受文档流动的影响，与background-attachment:fixed功能相同

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}/*相对浏览器视图向右100px，向下50px*/

Relative与Absolute组合

规范：
1. 参照定位的元素必须使相对定位元素的前辈元素：
2. 参照定位的元素必须加入position:relative
3. 定位元素加入position:absolute，便可用top、bottom``、left、right进行偏移定位
如

<!--box2相对box1定位-->
<style>
#box1{
    width:200px;
    height:100px;
    position:relative;
}
#box2{
    position:absolute;
    top:20px;
    left:30px;
}
</style>
<div id="box1"><!--参照定位的元素>
    <div id="box2">相对参照元素定位</div><!--相对定位元素-->
</div>

水平居中设置

行内元素

若被设置元素为文本、图片等行内元素，水平居中是通过给父元素设置text-align:center来实现

......
<style>
.txtCenter{
    text-align:center;
}
</style>
......
<body>
    <div class="txtCenter">我想要在父容器中水平居中</div>
</body>
......

块状元素

定宽块状元素

满足条件定宽和块状（块状元素宽度固定）
通过设置左右margin值为auto实现居中

......
<style>
div{
    border:1px solid red;
    width:200px;
    margin:20px auto;
    /*margin-left:auto*/
    /*margin-right:auto*/
}
</style>
......
<body>
    <div>定宽水平块状元素</div>
</body>
......

不定宽块状元素

三种方法居中
1. 加入table
2. 设置display:inline方法，使显示类型为行内元素，按行内元素处理
3. 设置position:relative和left:50%，利用相对定位，将元素左偏50%

加入`table`标签

利用table标签长度自适应性，因此可将其看作定宽度块元素处理
1. 为需要居中的元素外面加table（包括<tbody>、<tr>、<td>）
2. 视作定宽度块元素处理

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>
......
<div>
    <table>
        <tbody>
            <tr><td>
            <ul>
                <li>第一行</li>
                <li>第二行</li>
                <li>第三行</li>
            </ul>
            </td></tr>
        </tbody>
    </table>
</div>

设置`display:inline`方法

改变块级元素的显示方式为inline型，然后用text-align:center处理

<style>
.container{
    text-align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}
</style>
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
    </ul>
</div>
</body>

相对定位

给父元素设置float、position:relative、left:50%，子元素设置position:relative和left:-50%来居中
假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

<style>
.container{
    float:left;
    position:relative;
    left:50%;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
}
.container li{
    float:left;
    display:inline;
    margin-right:8px;
}
</style>
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
    </ul>
</body>

垂直居中设置

父元素高度确定的单行文本

通过父元素的height和line-height高度一致来实现。
line-height与font-size之差为行间距
弊端：文字内容大于块宽，有内容脱离块

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>
<div class="contanier">
    Hello World!
</div>

父元素确定的多行文本

方法一

使用table标签，同时设置vertical-align:middle。在父元素设置此样式，会对line-block类型的子元素都有用

<style>
    table td{
    height:500px;
    background:#ccc;
}
</style>
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>居中</p>
</div>
</td></tr></tbody></table>
</body>

td标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

方法二

当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left或float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height了，且默认宽度不占满父元素。

图层

z-index:number;

number越小，图层越在上方

光波变化

cursor:pointer;
/*光标置于其上时会变成“手”*/

Pesally

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS全称“层叠样式表(Cascading Style Sheets)”它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如p{ font-size:12px; color:red; font-weight:bold:}CSS代码语法基本结构注释实现方式内联式嵌入式外部式三种方法的优先级选择器标签选
复制链接

扫一扫