CSS

一、概述

1. 简介

Cascading Style Sheet 层叠样式表

实现网页的排版布局以及样式美化

2. 使用方式

2.1 行内样式

<p style="color:red">Hello World !!!</p>

2.2 文档内嵌

<html>
    <head>
        <style>
            .demo{
                color: red;
            }
            #demo{
                font-size: 40px;
            }
            span{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <p class="demo">Hello World !!!</p>
        <p id="demo">Hello World !!!</p>
        <p><span>Hello World !!!</span> </p>
    </body>
</html>

2.3 外联

创建外部样式文件(.css)
在HTML中使用<link>引入外部样式表
样式表借助选择器匹配元素

<html>
    <head>
        <title>样式表外部导入</title>
        <link rel="stylesheet" href="css/1.css">
    </head>
    <body>
        <p class="demo">Chancey Very Good !!!</p>
    </body>
</html>

.demo{
    color: darkcyan;
}

3. 样式表特征

3.1 层叠性

多个样式声明共同作用于元素

3.2 继承性

（除a标签的颜色之外，需要手动指定改动）

后代元素可以继承祖先元素的文本样式

<head>
    <title>DIV</title>
    <style>
        span{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span>DIV----->SPAN</span>
    </div>
    <h1 style="color: green">
        <span>H1---> span</span>
        <p><span>h1 --> p --> span</span></p>
        <a href="https://www.baidu.com">跳转百度</a>
    </h1>
</body>

3.3 样式表优先级

样式发生冲突时，考虑优先级

行内样式优先级最高
选择器样式优先级一致，样式发生冲突时，主要看代码的书写顺序，后来者居上
浏览器的默认样式和继承样式优先级最低

3.4 选择器

(1) 标签选择器

根据标签名匹配元素

(2) ID选择器

根据元素的id属性值匹配

id具有唯一性，不能重复；

id属性值自定义，可以由数字、字母、下划线、-组成，静止数字开头

(3) class选择器

根据class属性值匹配相关元素，可以重复使用

标签选择器与类选择器组合使用，必须标签名在前。例如：p.c1{}

class属性只能写一次，但是可取多个属性值，使用空格隔开。例如：class="c1 c2"

<html>
    <head><title>选择器</title></head>
    <style>
        h1{
            color: red;
            /* 标签选择器 */
        }
        #d1{
            background: pink;
            /* ID选择器 */
        }
        .c1{
            background: green;
        }
        /* 标签选择器与类选择器组合使用 */
        p.c1{
            /* 匹配类名为d2的p元素，设置文本加粗 */
            font-weight: bold;
        }
        c2{
            text-decoration: underline;
            /* 加下划线 */
        }
    </style>
    <body>
        <h1 id="d1">波多</h1>
        <h1>仓空</h1>
        <h1>利亚</h1>
        <h1 class="c1 c2">海翼</h1>
        <h1 class="c1">野村</h1>
        <p class="c1">测试</p>
        <p>参考</p>
    </body>
</html>

(4) 群组选择器

表示为一组元素统一设置样式

例如：selector1,selector2,selector3{}

(5)后代选择器

匹配第一个元素下的第二个元素

例如：selector1 selector2 selector3{}

(6)子选择器

匹配满足条件的直接子元素

selector1>selector2

(7) 伪类选择器

伪类用于对元素的不同状态设置样式

使用：只能与基础选择器（标签选择器、id选择器、class选择器）结合使用

分类：

:ink超链接访问前状态

:visited超链接访问后

:hover鼠标滑过的状态

:active鼠标点按不抬起

:focus焦点状态，常见于表单控件获取焦点

焦点：即表单控件的动作。例如鼠标点击文本框输入的时候，就是捕获了焦点

<html>
    <head>
        <title>练习</title>
        <style>
            div{
                display: inline;
                background: red;
            }
            div:hover{
                background: greenyellow;
                font-family: "微软雅黑";
                color: white;
            }
        </style>
    </head>
    <body>
        <div>收藏夹</div>
        <div>购物车</div>
        <div>账号</div>
        <div>爱淘宝</div>
    </body>
</html>

<html>
    <head>
        <title>练习</title>
        <style>
            div div{
                display: inline;
                background: red;
            }
            div div:hover{
                background: greenyellow;
                font-family: "微软雅黑";
                color: white;
            }
            ul,ol{
                /* 清除默认的边距 */
                padding: 0;
                /* 清除项目符号，即小圆点 */
                list-style: none;
            }
            /* 内层列表默认隐藏 */
            ol{
                display: none;
            }
            /* 鼠标悬停时显示 */
            ul>li:hover ol{
                display: block;
            }
            ul li{
                background: gray;
            }
            ul li ol li:hover{
                color: red;
                background: green;
            }
        </style>
    </head>
    <body>
        <div>
            <div>收藏夹</div>
            <div>购物车</div>
            <div>账号</div>
            <div>爱淘宝</div>
        </div>
        <ul>
            <li>我的淘宝
                <ol>
                    <li>我的收藏</li>
                    <li>我的购物车</li>
                    <li>我的物流</li>
                </ol>
            </li>
        </ul>
    </body>
</html>

如果需要给超链接设置四种状态下的样式，必须按照以下顺序书写:ink``:visited``:hover``:active

<html>
    <head>
        <title>伪类选择器</title>
        <style>
            a:link{
                color: black;
            }
            a:visited{
                color: gray;
            }
        </style>
    </head>
    <body>
        <a href="#">超链接</a><br>
        <a href="">超链接</a>
    </body>
</html>

不分状态设置默认样式

<html>
    <head>
        <title>伪类选择器</title>
        <style>
            a{
                color:black;
                text-decoration:none;
            }
            a:hover{
                color: orange;
            }
            input{
                outline: none;
            }
        </style>
    </head>
    <body>
        <a href="#">超链接</a><br>
        <a href="">超链接</a>
        <input type="text">
    </body>
</html>

(8) 选择器优先级

标签选择器 1
类/伪类 10
id选择器 100

特殊

后代选择器和子代选择器的权重由各个选择器权重累加得到。例：div h1 span{}

群组选择器的权重分别计算，不进行累加

(9) 标签分类嵌套

块元素：独占一行，不与其他元素共行；可以手动调整宽高

默认的宽度跟父元素保持一致，默认高度由内容决定。

（body、h1、h2、h3、h4、h5、h6、p、div、ul、ol、li、table、form）

其中，table尺寸由内容决定

内联元素

可以与其他元素共行，不能手动调宽高，实际尺寸由内容多少决定

例如：sapn、b、strong、label、a

行内块元素

可以与其他元素共行显示；可以手动调整宽高。

属性：vertical_align

取值：top、middle、bottom

作用：调整左右其他元素跟当前行内块元素的垂直对齐方式（调整元素）

例如：img、input、button

input,button{
    width: 80px;
    height: 40px;
    /* 设置行内块元素左右两侧内容与其的垂直对齐 */
    vertical-align: middle;;

<input type="text">
<button>按钮</button>

转换元素类型

属性：display

取值：block(块)、inline（行内）、inline-block（行内块）、none（隐藏）

标签嵌套

块元素中可以嵌套添加任意类型的元素（p元素只能嵌套行内或行内块元素）
行内元素中尽量只嵌套行内或行内块元素

二、盒子模型

属性的使用

1. 基础

1.1 尺寸单位

px：像素

%：百分比单位，默认参照父元素相关属性值进行计算

em：参照父元素的字体大小计算，默认1em=16px

1.2 颜色表示

单词英文单词表示

rgb(r,g,b):原色混合

rgba(r,g,b,alpha)在美术三原色的基础上，添加了透明度，取值范围0~1

16进制把10进制的rgb转成16进制即可

16进制方法：

1.每两位为一组，代表一种三原色，需6位，每一位取值0-9,a-f。例如：red= #ff0000=rgb(255,0,0,0)

2.使用三位字符表示三原色，取值0-9，a-f，浏览器会对每一位重复，扩充为长16进制。例如：#000=#000000

2. 内容溢出

(1) 盒模型由内容框，边框，内边框，外边距组成

关系到元素在文档中的实际占位，影响夜幕按布局

(2) 内容尺寸

width/height一般用于设置内容框的尺寸

(3)元素的内容超出了元素尺寸时，称为溢出

overflow

取值：

visible默认可见

hidden隐藏溢出的部分

scroll强制添加水平和垂直的滚动条

auto自动在发生溢出的方向添加可用的滚动条

溢出处理

3.边框

(1) 全边框

属性：border

取值：{width style color}

使用：solid实线边框、dashed虚线边框、dotted点线边框、double双线边框

以上方法会将所有四周边框全部设置

h1{
    width: 300px;
    height: 150px;
}
#d1{
    border: solid;
}
#d2{
    border: 2px solid red;
}
#d3{
    border: 2px dashed green;
}
#d4{
    border: 2px dotted blue;
}
#d5{
    border: 10px double orange;
}

全边框

(2) 单边框

属性：boder-top上边框、boder-bottom下边框、boder-left左边框、boder-right右边框

取值：{width style color}

一般用于网页三角标的制作

设置元素尺寸为0

统一设置四个方向上的透明边框rgba或者transparent

单独调整可见度
div{
    width: 0px;
    height: 0px;
    /* 
    border-top: 20px solid red;
    border-bottom: 20px solid green transparent;
    border-left: 20px solid blue rgba(0, 0, 0, 0);
    border-right: 20px solid orange transparent; 
    */
    border: 20px solid rgba(0, 0, 0, 0);
    border-top: 20px solid red;
}

(3) 轮廓线

属性：outline

取值：{width style color};

常用：取消输入框焦点状态自带的轮廓线

input:focus{
    outline:none
}

(4) 圆角

属性：border-radius

取值：像素值或百分比，设置圆角半径

使用：像素值设置圆角效果，百分比改变元素形状（50%为正圆或椭圆）

(5) 盒阴影

属性：box-shadow

取值：offsetX offsetY blur (spread) color

使用：

浏览器窗口和元素自身都可以都贱坐标系，一律以左上角为原点，向右下角为x轴和y轴的正方向。offsetX/offsetY用于设置阴影的偏移距离，正值代表正方向，负值对应负方向
属性值blur用于设置阴影的模糊程度，值越大越模糊
spread选填，设置阴影的延伸距离
color设置阴影颜色，默认黑色

简化记忆：{水平距离垂直距离模糊度模糊颜色}

4.内边距

作用：调整内容框与边框之间的距离

属性：padding

值：像素值（可以是多个值）

使用：

4个值分别代表上、右、下、左
2个值分别代表上下、左右
3个值分别代表上、右、下（左的值和右边保持一致）

单方向内边距：

padding-top
padding-right
padding-bottom
padding-left

单方向的属性值只能有一个

默认带有内边距的元素：ul、ol、input、button

5.外边距

作用：调整元素边框与边框之间的距离

属性：margin

取值：像素值，取值规律同padding

特殊取值：

(1)左右自动外边距（auto）

(2)外边距取负值，可以对元素位置进行微调

注意：行内换行导致的空格，不要用margin-left:-4px处理，而是将父元素的font-size:0然后将需要调整的font-size赋值

单方向外边距属性

margin-left
margin-top
margin-bottom
margin-right

外边距合并

(1) 垂直合并

子元素的margin-top作用于父元素上

解决：为父元素添加顶部边框或为父元素添加顶部的内边距padding-top:0.1px
同时设置垂直方向的外边距，取最大值

(2) 水平合并

行内元素对盒模型的属性不完全支持，不支持width/height,不支持垂直方向上的边距
水平方向上的外边距叠加显示

清除元素的默认样式

自带样式的标签：body,h1,h2,h3,h4,h5,h6,p,ul,ol

body,h1,h2,h3,h4,h5,h6,p,ul,ol{
    margin: 0;
    padding: 0;
    /* 去除列表的项目的符号 */
    list-style: none;
}

在div中定义的尺寸实际是内容框的尺寸

6. 计算方式

属性：box-sizing

作用：调整元素盒模型的计算方式

取值：content-box/border-box

(1) 大部分元素在文档中的实际占位，由盒模型相关的属性累加计算。指定的width/height设置的是内容框的大小(content-box)

(2) 按钮在文档中的实际占位，由width/hright+margin计算得到。指定的width/hright设置的是包含边框在内的区域大小(border-box)

例如：搜索框

三、布局方式

1.默认布局

标准流布局、文档流、静态流

按照元素类型和代码书写顺序，从上到下，从左到右依次显示

2.浮动布局

属性：float

取值：left/right

特点

(1)元素设置浮动，会按照浮动方向，停靠在其他元素的边缘；多个元素同时浮动的话，会依次停靠在其他元素的边缘。

(2) 浮动元素会脱离文档流，标签为悬浮在父元素的上方，在文档中不占位（对父元素有影响，对兄弟元素也有影响）。后边正常元素会向前占位。如果所有子元素都浮动，则父元素的高度为0。

(3) 块元素设置浮动之后，其尺寸由内容来决定；行内元素设置浮动，就可以设置宽高。

行内元素必须在设置浮动之后才能设置宽高

特点：

浮动元素按照浮动方向依次停靠在前一个元素的边缘，一旦设置浮动，就会脱离文档流，在文档中不占位，可以设置宽高
"文字"环绕效果：浮动元素不占位，后面正常元素向前占位，被浮动元素遮挡。但是浮动元素只会遮挡元素位置，不影响元素内容的显示，内容会围绕浮动元素周围显示

行内元素添加vertical-align取top/middle/bottom，来调整左右两侧内容与当前行内快的垂直对齐方式

图文混排

问题1：浮动元素不占位，后面正常元素向前占位，影响布局。

解决：清除浮动

属性：clear

取值：left/rignht/both

使用：为正常元素添加clear属性，使其不受前边元素的左浮右浮

问题2：子元素全部浮动了，导致父元素高度为0，影响父元素自身背景及边框样式的显示，影响整体布局

解决

内容确定时，可以给父元素定高度
内容不确定时，也就是高度不定，可以为父元素设置overflow:hidden;(保留浮动元素的高度)
标准的清除浮动(在父元素的末尾手动添加空的子元素，设置clear:both)

3.定位布局

属性：position

取值：relative / absolute /fixd

使用：

3.1 已定位元素

只有设置position属性，取值为relative / absolute /fixd，才能偏移元素

3.2 偏移属性

top：设置元素与参照物顶部的距离（同理：left / right / botton）

3.3 分类

相对定位relative

特点：相对定位的元素不会脱离文档流；参照元素在文档中的原始位置进行偏移

使用之前必须添加position:relative
绝对定位position: absolute

特点：绝对定位的元素脱离文档流，不占位；参照离他最近的已定位的祖先元素进行偏移，没有的话，参照浏览器窗口的原点偏移
固定定位fixed

特点：固定定位的元素会脱离文档流；参照窗口进行定位；不跟随页面滚动而滚动

多用于网页聊天窗口、博客文章目录

3.4 堆叠次序调整

已定位的元素与正常的元素发生堆叠，永远是已定位的元素在上方显示
同为已定位元素，后来者居上（取决于代码的书写顺序）

调整堆叠的顺序：

属性：z-index

取值：无单位的整数值，值越大越靠上显示

注意：只能作用在已定位的元素上

四、背景

1. 背景颜色

background-color除了表单控件之外，其他元素默认背景为透明色

2. 背景图片

background-image: url("");

如果图片尺寸大于元素尺寸，还是按照元素尺寸显示，超出部分不可见；

如果图片尺寸小于元素尺寸，则重复平铺该图片，直至铺满元素

background-repeat

设置背景图片的重复方式，默认沿水平和垂直两个方向同时重复

取值：repeat(默认) / repeat-x / repeat-y / no-repaet(不重复平铺)

background-position设置背景图片的显示的位置

取值：

取像素值 x y

设置背景图片在元素坐标系中的显示位置
方位值

水平：left / center / right

垂直：``top / center / bottom`

注意：如果某个方向上缺省，默认center
百分比 x y

计算坐标点（元素尺寸-图片尺寸）*x%

特殊值：

0% 0% --left top

100% 100% -- right bootom

50% 50% -- center

background-size: width height调整图片尺寸

可以取像素值；也可以去百分比，根据元素尺寸计算宽高

特殊值：cover / contain前者等比例拉伸至足够大，完全覆盖元素，超出部分不可见；后者也是拉伸足够大，刚好被元素容纳，不能超出元素

3. 背景简写

background:color url() repeat position

注意：

只有设置了背景图片url()以后才能设置重复方式和位置
background-size单独设置

五、文本属性

1. 字体样式

font-size字体大小

font-weight字体粗细（取值normal(400) / bold(700)）

font-style设置斜体（取值italic）

font-family字体名称

font:style,weight,size,family简写模式（其中size和family必填）

2.文本样式

color 文本颜色

text-decoration:none / underline / overline / line-through文本装饰线

text-align:left / center / right / justify(两端对齐)文本水平对齐方式

line-height设置行高

六、显示设置

list-style:none;清除列表的项目符号

cursor:default(箭头) / pointer(手指) / text(悬停在文本显示)鼠标显示形状

五、练习

百度首页

/* 清除默认样式 */
body,ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    color: gray;
}
a{
    color: #333;
    /* 取消超链接的下划线 */
    text-decoration: none;
}
/* 页面结构定宽居中 */
#nav,#main{
    width: 990px;
    margin: 20px auto;
    /* border: 2px solid red; */
}
/* 导航栏 */
#nav{
    height: 50px;
    margin-bottom: 50px;
    line-height: 50px;
    margin-right: 20px;
    /* border: 2px solid red; */
}
#nav ul{
    float: right;
}
#nav li{
    float: left;
    margin-left: 20px;
}

/* 主体 */
#main{
    padding-top: 0.1px;
}
.logo{
    width: 270px;
    height: 180px;
    background: green;
    margin: 30px auto;
}
.search{
    width: 650px;
    height: 50px;
    margin: 0 auto;
    /* text-align: center; */
    /* border: 2px solid red; */
    font-size: 0;
}
.search-input{
    width: 550px;
    height: 35px;
    /* 宽高设置的是包含边框在内的区域大小 */
    box-sizing: border-box;
    /* border: 1px solid gray; */
    outline: none;
    font-size: 20px;
}
.btn{
    line-height: -2px;
    width: 90px;
    height: 35px;
    background: rgb(39, 89, 182);
    color: white;
    border: 1px solid rgb(39, 89, 182);
}
img{
    width: 270px;
    height: 180px;
    margin: 0 auto;
}
.btn:hover{
    background: rgb(27, 62, 126)
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度一下，你就知道</title>
    <link rel="stylesheet" href="css/baidu.css">
</head>
<body>
    <!-- 顶部导航区域 -->
    <div id="nav">
        <ul>
            <li><a href="">新闻</a></li>
            <li><a href="">hao123</a></li>
            <li><a href="">地图</a></li>
            <li><a href="">视频</a></li>
            <li><a href="">贴吧</a></li>
            <li><a href="">学术</a></li>
            <li><a href="">登录</a></li>
            <li><a href="">设置</a></li>
            <li><a href="">更多产品</a></li>
        </ul>
    </div>
    <!-- 主体元素 -->
    <div id="main">
        <!-- logo -->
        <div class="logo"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""></div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" class="search-input">
            <input type="submit" value="百度一下" class="btn">
        </div>
    </div>
</body>
</html>

posted @ 2019-08-13 18:58 ChanceySolo 阅读(302) 评论(0) 编辑收藏举报

刷新页面返回顶部

素心

人生苦短，我用Python。

CSS

CSS