首页 > 其他分享> 文章详细

CSS

2021-05-07 02:03:24 阅读：196 来源： 互联网

标签：行内 color 标签元素边框选择器 CSS

1. CSS

1.1 为什么使用CSS

美化网页
元素的属性不能改变所有的样式
元素的属性使代码比较臃肿，结构与样式没有分开

1.2 怎样使用CSS

行内样式表

只能适用于单个元素
没有实现结构与样式分离

内部样式表

适用于多个选择器相同的样式
部分实现了结构与样式的分离

外部样式表

适用于当前站点的任何html文件
完全实现了结构与样式的分离

<header style="color: red;">网页头部</header>

/* 选择器 {
            属性：属性值
        } 
*/
p {
	color: blue;
}

<link rel="stylesheet" href="style.css">

1.3 CSS字体属性

	header {
            font-family: SimSun;
            font-family: "宋体";
            /* 默认大小 16像素 */
            font-size: 28px;
            font-weight: bolder;
            font-style: oblique;
        }
        div {
            font: oblique bolder 40px SimSun;
        }

1.4 CSS外观属性

	header {
            color: red;
            color: rgb(10, 100, 200);
            color: #fedfe1;
            color: hsl(120,100%,100%);
        }
	div {
            /* 首行缩进 */
            text-indent: 2em;
        	/* 文本水平居中 */
            text-align: center;
        	/* 文本行高属性：属性值等于高度，垂直居中 
        	对于块级元素，指定块元素最小高度*/
        	line-height: 100px;
            /* 文本描述:上划线 */
            text-decoration: overline;
        	/* 去掉li小点 */
        	list-style: none;
        	/* 多行文本框取消拖拽 */
        	resize: none;
        	/* 圆角 */
        	/* 四个值:左上，右上，右下，左下 */
            /* 三个值:左上，右上左下，右下 */
        	/* 两个值:左上右下，右上左下 */
        	border-radius: 10px;
        }

2. CSS选择器

选择器：通过特定的符号去选择指定的元素

分类：

基础选择器：标签选择器、类名选择器、ID选择器、多类名选择器、通配符选择器
复合选择器：交集选择器、并集选择器、后代选择器、子代选择器
伪类选择器

2.1 基础选择器

    /* 基础选择器：标签选择器、类名选择器、ID选择器、多类名选择器、通配符选择器 */
		/* 标签选择器：通过标签的名获取指定元素 */
        header {
            color: antiquewhite;
        }
	    /* 类名选择器：通过标签的类名获取指定元素，前加.
    	   多类名选择器：多个类名之间用空格隔开 */
        .box1 {
            color: aqua;
        }
    	/* ID选择器：通过ID名获取指定元素。 ID不可重复 */
        #box-list {
            color: blue;
        }
    	/* 通配符选择器：选择所有元素 */
        * {
            text-align: center;
        }

2.2 复合选择器

/* 复合选择器：交集选择器、并集选择器、后代选择器、子代选择器 */
	/* 交集选择器：既是...，又是... 两个选择器之间紧挨着，不能加空格 */
        div.box2 {
            color: red;
        }
        .box1.box2 {
            font-family: SimSun;
            font-size: 40px;
        }
	/* 并集选择器:多个选择器之间用逗号隔开，且每个选择器独占一行 */
        .box3,
        .box1 {
            font-weight: bolder;
        }
	/* 子代选择器：必须是一级父子关系 */
        .list1>li {
            color: purple;
        }
	/* 后代选择器：后代都可以 */
        .list1 div {
            font-size: 70px;
        }

2.3 伪类选择器

		/* 单击前的样式 a标签*/
        .link1:link {
            color: red;
        }
        /* 鼠标移上去的样式 (通用)*/
        .link1:hover {
            color: pink;
        }
        /* 单击时的样式 (通用)*/
        .link1:active {
            color: green;
        }
        /* 单击后的样式 a标签*/
        .link1:visited {
            color: brown;
        }

3. 标签的显示模式

标签显示模式：

3.1 块状元素

hn、p、div、ul、ol、li、dl、dd、dt、table、caption、thead、tbody、tr、td、th、header、footer、section、artical、aside

特点：

始终独占一行可以包含任何元素(h标签不能包含h标签，p标签不能包含p标签)
有默认宽高，是父元素的100%，高度是内容高度
宽高、外边框，内边距，边框可以设置

3.2 行内元素

span、a、label、b/shrong、i/em、u/ins、s/del

特点：

有默认宽高，宽高是内容所撑起的宽高
宽高设置无效
不能包含块状元素，可以包含行内元素和文本内容
相邻的行内元素在同一行显示
边框可以设置，内外边距水平方向可以设置，垂直不行

3.3 行内块元素

img、input、select、option、datalist、textarea、button

特点：

相邻的行内块元素在同一行显示
有默认宽高
宽高、外边框，内边距，边框可以设置
一般不包含其他元素

3.4 显示模式的转化：

转化为块状元素：display：block
转化为行内元素：display：inline
转化为行内块元素：display：inline-block

4. 背景

4.1 分写

		.box1 {
            width: 600px;
            height: 350px;
            background-color: violet;
            background-image: url(images/02.png);
            /* 平铺属性 */
            background-repeat: no-repeat;
            /* 位置属性：水平、垂直方向 */
            background-position: right bottom;
            background-position: 30px 0px;
            background-position: 0 50%;
            /* 尺寸属性 */
            background-size: 600px 350px;
            background-size: 80% 80%;
            background-size: cover; 
        }

4.2 总写

.box2 {
            width: 600px;
            height: 350px;
            /* 背景色 地址 平铺属性 位置 */
            background: red url(images/02.png) no-repeat 100% 100%;
            background-size: 60%;
        }

5. CSS三大特性

5.1 CSS特性

层叠性：后者覆盖前者
继承性：子(后代)承父业
优先级（权重性）：style > !import > ID选择器 > 类名选择器 > 标签选择器 > 通配符选择器 (同一元素)

5.2 优先级比较

标签 0 0 0 1
类名 0 0 1 0
ID 0 1 0 0
style 1 0 0 0

6. 盒子模型

网页布局的本质：拼接盒子的过程

盒子模型包含：内容、宽高、边框、内边距、外边距

6.1 边框

.box1 {
            width: 100px;
            height: 80px;
    		border-top: 1px solid black;
            /* 实线 solid、虚线 dashed、双实线 double、点线 dotted*/
            /* 边框会影响盒子尺寸 */
            /* 上边框、下边框、左边框、右边框 */
            border: 10px 10px 10px 10px solid black;
        }

6.2 内边距

.box1 {
            width: 200px;
            height: 100px;
            /* 上右下左 */
            padding: 10px 40px 40px 10px;
            /* 上、左右、下 */
            padding: 10px 40px 10px;
            /* 上下、左右 */
            padding: 10px 40px;
            /* 内边距会影响盒子尺寸 */
        }

6.3 外边距

外边距：

元素与其他元素与浏览器的距离
任何元素都有默认的外边距
外边距不会影响盒子尺寸

相邻元素的垂直外边距塌陷：两元素垂直相邻，外边距取较大值

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
如果父元素没有上边框且没有上内边距，子元素的上外边距就是父元素的上外边距

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
可以让一个盒子实现水平居中margin: auto; 必须满足：
1. 必须是块级元素。
2. 盒子必须指定了宽度
消除嵌套外边距合并：
1. 给父元素加上边框
2. 给父元素加上内边距
3. 给父元素添加overflow:hidden

.box1 {
        /* 同padding */
        margin-top: 30px 10px 10px 30px;
        /* 
        text-align 内容的水平居中：
        相对于盒子的宽度局中（盒子必须有宽度）
        行内元素和文本都行
        包含的块状、行内块元素不会水平居中
        */
        }

7. 浮动与定位

7.1 浮动

标准流：元素按照本身特性进行排列
浮动：元素脱离标准流，漂浮在其它元素之上

浮动属性：float

浮动的分类左浮动left、右浮动right

.box1 {
    float: left;
    float: right;
}

特点：

浮动的元素漂浮在其他元素之上
浮动不占位置
同时浮动的元素在同一行上显示
浮动后的元素不会超出父元素范围，包括内边距和边框
浮动后的元素自动转化为行内块元素

7.2 清除浮动

浮动的影响: 浮动后的元素不占位置，不能撑开父元素的高度

清除浮动：

额外标签法：在父元素里边的最后添加额外的标签 clear: left\right\both
给父元素添加 overflow:hidden
伪元素清除两个冒号是伪元素

.clearfix::after {
            content: "";
            display: block;
            clear: both;
		}

双伪元素清除 display:table

.clearfix::before,
.clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

7.3 定位

定位：把元素固定在一个位置上

分类：静态定位、相对定位、绝对定位、固定定位

tips: 元素添加了绝对定位和固定定位之后，元素转换为行内块模式

/* 定位属性：position
   边偏移量：left、right、top、bottom */
	.box { 	
        position: absolute;
        top: 400px;
        left: 400px;
		}
	/* 静态定位 static 标准流布局 */
	/* 相对定位 relative 
		相对于元素本身定位
         可以使用边偏移量
         没有脱标
         占位置
         不受父元素影响，只跟本身位置相关 */
     /* 绝对定位 absolute
		相对于视口定位(父元素没有定位)
         如果父元素相对定位 relative,则相对于父元素定位
         可以使用
         脱标
         不占位置
         分情况，总能超出父元素范围 */
	/* 固定定位 fixed
		相对于浏览器定位
		可以使用
		脱标
		不占位置
		和父元素无关 */

7.4 overflow:hidden的作用

溢出的内容隐藏掉
清除浮动的影响
清除嵌套外边距塌陷

8. 高级技巧

8.1 显示省略号

/* 强制文本同一行显示 */
white-space: nowrap;
/* 溢出内容隐藏 */
overflow: hidden;
/* 省略号 (缺一不可)*/
text-overflow: ellipsis;

8.2 光标

cursor: default; /* 默认 */
cursor: pointer; /* 小手 */
cursor: move; /* 拖动 */
cursor: text; /* 文本 */

8.3 轮廓

轮廓：获取焦点时，四周显示的线

outline: 0;

8.4 行内块元素

文本内容或者行内元素相对于同一行内块元素垂直居中

vertical-align: middle;

清除行内块元素默认边距 : 转化为块元素并浮动

display: block;
float: left;

相邻行内块元素，其中一个设置外边距，相邻的也受到影响:

给设置外边距的行内块元素设置

vertical-align:top;

8.5 元素的显示与隐藏

元素的隐藏：

display: none

没有删除结构，只是通过样式隐藏

不占位置

display:block (显示)
visibility: hidden

没有删除结构，只是通过样式隐藏

占位置
opacity: 0

没有删除结构，只是通过样式隐藏

占位置
overflow: hidden (隐藏溢出的子元素)

8.6 版心与布局流程

“版心”(可视区) 是指网页中主体内容所在的区域 960px 980px 1000px 1200px 1190px
布局流程：由外到内，由大到小

一列固定宽度且居中
两列左窄右宽
通栏平均分布

8.7 精灵图

为什么要使用精灵图？减少服务器的压力，提高加载的速度

精灵图：将多张图片拼接在一张图片上，通过背景的位置属性选择合适位置即可

8.8 字体图标

阿里图标库

unicodes引入、font-class引入、symbol引入

标签：行内,color,标签,元素,边框,选择器,CSS
来源： https://www.cnblogs.com/recreyed/p/css01.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS