css 总结

最新推荐文章于 2023-04-29 21:49:11 发布

weixin_45819310

最新推荐文章于 2023-04-29 21:49:11 发布

阅读量240

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45819310/article/details/125860770

版权

选择器

id选择器

id选择器为标有特定id的HTML元素指定的特定样式

CSS中以“#”定义id选择器

#para1
{
    text-align: center;
    color: red;
}

class选择器

用于描述一组元素的样式，class选择器可以在多个元素中使用，在CSS中类选择器以点“.”显示

.center{
    text-align: center;
}

通配符选择器

匹配到所有元素，使用 * 表示

* {
    font-size: 20px;
    margin: 0px;
}

并集选择器

将几类标签放在一行，每两个标签之间用逗号隔开

.content,#pp,span {
	color: red;
}

后代选择器

一个类中包含的子类，类和子类中间用空格隔开

div p{
	background-color: #757575;
}

element + element 选择器

选择所有紧跟在

元素之后的第一个

元素

div+p
{
	background-color:yellow;
}
<div>
	<h2>DIV 内部标题</h2>
	<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>

element>element选择器

选择某个父级元素中的某个子元素

div>p
{
	color:red;
}
<div>
	<h2>My name is Donald</h2>
	<p>I live in Duckburg.</p>
</div>

CSS创建

外部样式表

通过改变一个文件改变整个站点的外观，每个页面使用链接到样式表

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

浏览器会从文件mystyle.css中读取样式声明，外部样式表可以在任何文编编译器中编辑，文件中不能包含任何的html标签。样式表以.css保存

hr{
    color: sienna;
}
p{
    margin-left: 20px;
}
body{
    background-image: url("/image/back40.gif");
}

内部样式表

当单个文档需要特使样式时，使用

<head>
    <style>
        hr{
    		color: sienna;
		}
		p{
    		margin-left: 20px;
		}
		body{
    		background-image:url("/image/back40.gif"); 		             
		}
    </style>
</head>

内联样式

将表现和内容混在一起

<p style="color: sienna; margin-left: 20px">这是一个段落</p>

多重样式

某些属性在不同的样式表中被同样的选择器定义，属性值将从更具体的样式表中被继承

例如：外部样式表有针对h3选择器的三个属性

h3{
    color: red;
    text-align: left;
    font-size: 8pt;
}

多重样式优先级

优先级：(内联样式)Inline style > (内部样式)Internal style sheet > (外部样式) External style sheet > 浏览器默认样式

背景(Background)

背景颜色

background-color定义元素的背景颜色，页面的背景颜色在body的选择器中

body{
    background-color: #b0c4de;
}

背景图像

background-image定义元素的背景图像

body{
    background-image: url('paper.gif');
}

背景效果

backgroud-color 背景颜色 3种表示方法颜色名称、16进制、rgb

background-image 背景图片

background-repeat 平铺方式如，水平方向(repeat-x)、垂直方向(repeat-y)、不平铺(no-repeat)

body{
    background-image: url('pic.png');
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
}

background-attachment 背景固定

body {
    background-image: url('pic.png');
    background-attachment: fixed;
}

background-position 位置设定如，top、bottom、left、right

body{
    background-image: url('img_tree.png');
    background-position: right top;
}

CSS背景标签

Property	描述
background-attachment	背景图像是否固定或随着页面的其余部分滚动
background-color	背景颜色
background-image	设置图像为背景
background-position	图像位置
background-repeat	平铺对象

文本(Text)

文本颜色

通常使用十六进制、RGB、颜色名称三种方式来指定颜色

body{
    color: red;
}
h1{
    color: #00ff00;
}
h2{
    color: rgb(255,0,0);
}

文本的对齐方式

使用text-align定义文本的对齐方式，当text-align的值设置为justify时，文本是两端对齐

h1 {text-align:center;}
p {text-align:left;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

使用text-decoration对文本进行修饰，如上划线、下划线、删除线等

h1{text-decoration: overline;} 上划线
h3{text-decoration: underline;} 下划线
h2{text-decoration: line-through;} 删除线

文本转换

text-transform指定文本中大写和小写的字母、单词或句子

p.uppercase{text-transform:uppercase;}  /*全部大写*/
p.lowercase{text-transform:lowercase;}	/*全部小写*/
p.capitalize{text-transform:capitalize;} /*首字母大写*/

文本缩进

text-indent设置文本的第一行缩进

p{text-indent:50px;}

实例

文本阴影

h1 {text-shadow:2px 2px #FF0000;}

行之间的间距

p.small {line-height:70%;}
p.big {line-height:200%;}

增加单词之间的空间

p{word-spacing:30px;}

字体(Fonts)

字体系列

font-family设置文本的字体属性

p{font-family:"Times New Roman", Times, serif;}

字体样式

字体样式属性有三个值：正常、斜体、倾斜（文字向某一侧倾斜）

p.normal{font-style:normal;}
p.italic{font-style:italic;}
p.oblique{font-style:oblique;}

实例

字体加粗

p.thick{text-weight:bold;}

字体的转变

p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}

链接(link)

链接样式

可以使用任何CSS属性（颜色、字体、背景等）

链接的不同样式取决于它们的状态：

a:link 未访问的链接
a:visited 已访问过的链接
a:hover 鼠标放在链接时
a:active 链接被点击时

链路的顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

文本修饰

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

指定链接的背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

创建链接框

a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}

列表

不同列表项标记

list-style-type指定列表项标记的类型

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

列表项标记的图像

指定列表项标记的图像list-style-image

ul{
    list-style-image: url('sqpurple.gif');
}

表格

边框

CSS 使用border设置表格边框

table, th, td{
    border: 1px solid black;
}

border-collapse设置表格边框是否是单一的边框或隔开

table{
    border-collapse: collapse;
}
table,th,td{
    border:1px solid black;
}

表格宽度和高度

width和height定义宽度和高度

table{
    width:100%;
}
th{
    height:50px;
}

表格文字对齐

text-align设置水平对齐方式

vertical-align设置垂直对齐方式

td{
    height:50px;
    text-align:center;
    vertical-align:bottom;
}

表格填充

padding设置边框和表格内容的间距

padding:15px 文字距上下左右边框的间距均为15px

表格颜色

table,td,th{
    border:1px solid green;
}
th{
    background-color:green;
    color:white;
}

实例

设置表格标题的位置

caption{
    caption-side:bottom;
}

盒子模型

盒子结构

CSS box-model

margin：外边框
border：内边框
padding：边距
content：内容

元素的宽度和高度

定义css元素的宽度和高度只是内容区域的高度和宽度，完整元素的大小还需要加上内外边距和边框

div{
    width:300px;
    border:25px solid green;
    padding:25px;
    margin:25px;
}

元素总宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right

元素总高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom

边框(border)

边框样式

border-style定义边框样式：

p.none{border-style:none;} /* 无边框 */
p.dotted{border-style:dotted;} /* 点线边框 */
p.dashed{border-style:dashed;} /* 虚线边框 */
p.solid{border-style:solid;} /* 实线边框 */
p.double{border-style:double;} /* 双边框 */
boder-radius:50%; /*边框的角是圆弧*/

边框宽度

border-width边框的宽度，为边框指定宽度的两种方法：

指定长度值：2px或0.1em
使用关键字：thick,medium,thin

p.one{
    border-style:solid;
    border-width:5px;
}
p.two{
    border-style:solid;
    border-width:medium;
}

边框颜色

border-color设置边框颜色

name 颜色名称，如 red
RGB
Hex 16进制值

只有先使用了border-style设置边框样式后，border-style才有效

p.one{
    border-style:solid;
    border-color:red;
}
p.two{
    border-style:solid;
    border-color:#98bf21;
}

单独设置各边

p{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

轮廓(outline)

用于绘制元素周围的线，位于边框的外围

outline属性指定元素轮廓的样式、颜色和宽度

元素周围画线

p {
    border:1px solid red;
    outline:green dotted thick;
}

轮廓颜色

p{
    border:1px solid red;
	outline-style:dotted;
	outline-color:#00ff00;
}

轮廓宽度

p.width{
    border:1px solid red;
    outline-style:dotted;
    outline-width:3px;
}

外边距(margin)

外边距margin会重叠选取最大的值，例如，一个盒子的margin-bottom: 50px 另一个盒子的margin-top: 20px，那么两个盒子的间距margin是50px。

单边外边距

指定不同侧面不同的边距

p.margin{
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
}

填充(padding)

单边内边距

指定不同侧面的不同填充，给值原则：四个值是上右下左，三个值是上(左右)下，两个值是(上下)(左右)

p.padding{
    padding: 25px 255px 50px 50px; /* padding简写形式*/
    padding-top:25px;
    padding-bottom:255px;
    padding-right:50px;
    padding-left:50px;
}

透明度

使用opacity设置透明度，opacity的范围是0~1

opacity: 0.5;

CSS布局

flex布局

弹性布局，根据页面的宽度自动调整页面的布局

dispaly:flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: space-evenly;

Grid布局

display:grid; 网格布局 display: inline-grid; 设置内联的网格容器

grid-template-columns: repeat(3,auto); grid-template-columns 和 grid-template-rows定义表格的列和行

gap: 10px; 设定网格单元格之间的间距

CSS特性

层叠性

样式冲突，遵循就近原则，哪个样式离得近执行哪个
样式不冲突，各自执行

继承性

子标签会继承父标签的某些样式，如text-，font- ，color等

显示(display)

隐藏元素

隐藏元素可以使用display:none或visibility:hidden

visibility:hidden可以隐藏某个元素，但隐藏的元素仍会影响布局。

h1.hidden{visibility:hidden;}
h1.didden{display:none;}

改变元素的显示

链接列表水平显示

li{
	dispaly:inline;
}

span元素作为块元素

span{
    display:block;
}

浮动(float)

浮动会使元素向左或右移动，周围的元素也会重新排列

元素的浮动

使用float设定元素的浮动方向是向左还是向右

p{
    float:right;
}

相邻的浮动元素

.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}

清除浮动

元素浮动后，周围元素会重新排列。清除浮动的方式：

给父级元素添加height；

使用clear: both

.text_line{
    clear:both;
}

清除浮动的目的：

由于父级盒子很多情况下，不方便给高度，但盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

定位

相对定位

postion: relative;

元素添加一个相对定位，并并添加top、right、left、bottom时给了一定的像素值，就会离开原来的位置，但不会脱离文档流。

绝对定位

position: absolute;

absolute会让元素脱离文档流（类似浮动），再添加top等属性时，它的基准点是浏览器的左上角(0,0)

固定定位

把元素固定在某个地方，滚动页面时不会把固定的元素划走

position: fixed;

粘贴定位

position: sticky;

粘贴定位的元素是依赖一用户的滚动，在position:relative与position:fixed之间切换。当页面滚动没有超出目标区域时，它的表现为相对定位，它的表现就像position:fixed 固定在页面中。

对齐

元素居中对齐

使用margin:auto 对齐一个元素

.center{
    margin:auto;
    width:50%;
    border:3px solid green;
    padding:10px;
}

图片居中对齐

在块元素中使用margin:auto使图片居中

img{
    display:block;
    margin:auto;
    width:40px;
}

左右对齐

使用float方式对齐

.right{
    float:right;
    width:300px;
    border:3px solid #73AD21;
    padding:10px;
}

子元素的高度大于父元素时，且子元素有浮动，子元素将会溢出。可以在父元素添加overflow:auto解决元素溢出

div {
    border: 3px solid #4CAF50;
    padding: 5px;
}
.clearfix {
    overflow: auto;
}
.img2 {
    float: right;
}

垂直居中对齐

使用 padding

.center{
    padding: 70px 0; /* 70px是外框的宽度 */
    border: 3px solid green;
}

垂直居中

使用line-height设置文本在文本框中的位置

.center{
    line-height:200px;
    height:200px;
    border:3px solid green;
    text-align:center;
}
/* 多行文本 */
.center p{
    line-height:1.5;
    display:inline-block;
    vertical-align:middle;
}

使用position和transform

.center{
    height:200px;
    position:relative;
    border:3px solid green;
}
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

导航栏

导航条是链接列表，使用ul和li定义

垂直导航栏

ul{
    list-style-type:none;
    margin:0;
    padding:0;
    width:200px;
    background-color:#f1f1f1;
}
li a{
    display: block;
    color:#000;
    padding:8px 16px;
    text-decoration:none;
}
li a:hover{
    background-color:#555;
    color:white;
}

水平导航栏

ul{
    border:1px solid #555;
}
li{
    text-align:center;
    border-bottom:1px solid #555;
}
li:last-child{
    border-bottom:none;
}

文本中省略号

.p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

CSS动画（animation）

使用@keyframes声明css动画

@keyframes change-color{
          from{background-color: red;}
          to{background-color: blue;}  
}
.box-animation{
          animation-name: change-color;
          animation-duration: 2s;         /*持续时间*/
          animation-iteration-count: 2;   /*持续次数*/
}

@keyframes change-color{
         0%{background-color:red; top:10px; left:10px;} 
         20%{background-color:orange; top:20px; left:20px;}
         40%{background-color:yellow; top:30px; left:30px;}
         60%{background-color:green; top:40px; left:40px;}
         80%{background-color:blue; top:50px; left:50px;}
         100%{background-color:purple; top:60px; left:60px;}
}
.box-animation{
         animation-name: change-color;
         animation-duration: 2s;         /*持续时间*/
         animation-iteration-count: 2;   /*持续次数*/
         animation-delay:2s;
}

媒体查询

@media可以针对不同的屏幕尺寸设置不同的样式

语法规范

@media mediatype and | not |only (media feature){
  CSS-Code;
}

mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

mediatype查询类型

值	解释
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等

关键字

and：将多个媒体特性连接到一起，相当于“且”
not：排除某个媒体类型，相当于“非”，可以省略
only：指定某个特定的媒体类型，可以省略

媒体特性

值	解释
width	定义输出设备中页面课件区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

p:40px; left:40px;}
         80%{background-color:blue; top:50px; left:50px;}
         100%{background-color:purple; top:60px; left:60px;}
}
.box-animation{
         animation-name: change-color;
         animation-duration: 2s;         /*持续时间*/
         animation-iteration-count: 2;   /*持续次数*/
         animation-delay:2s;
}

媒体查询

@media可以针对不同的屏幕尺寸设置不同的样式

语法规范

@media mediatype and | not |only (media feature){
  CSS-Code;
}

mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

mediatype查询类型

值	解释
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等

关键字

and：将多个媒体特性连接到一起，相当于“且”
not：排除某个媒体类型，相当于“非”，可以省略
only：指定某个特定的媒体类型，可以省略

媒体特性

值	解释
width	定义输出设备中页面课件区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度