title: CSS基础
date: 2021-01-28 11:23:46
tags: 技术
CSS概述
CSS指层叠样式表
一般格式
selector{
property:value
}
例如：
h1{color:red; font-size:14px;}
- 属性大于1个，属性之间要用分号隔开
- 如果值大于1个单词，则需要加上引号：
p{font-family:"sans serif"}
CSS高级语法
-
选择器分组
可以给多个元素加上同一个样式
h1,h2,h3{color:red;}
- 继承：
body{
color:green;
}
body里面的样式，如果没有自己的样式就用这个
派生选择器
通过依据元素在其位置的上下文关系来定义样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<p><strong>hello css</strong></p>
<ul>
<li><strong>标签</strong></li>
</ul>
</body>
</html>
li strong{
color:red;
}
strong{
color:blue;
}
第一个改变了li strong的颜色，第二个因为li strong更细，就只改变第一个文本
id选择器
- id选择器：
- id选择器可以为标有id的HTML元素指定特定的样式
- id选择器以"#"来定义
- id选择器和派生选择器：
- 常用的方式是id选择器用于建立派生选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<p id="a1">hello css<a href="http://www.baidu.com">百度</a></p>
<div id="divid">这是一个div</div>
</body>
</html>
#a1 a{
color:red;
}
#divid{
color:blue;
}
id不使用数字开头，第一个是派生和id同时使用，第二个是id
类选择器
- 类选择器以一个点显示
- class也可以用作派生选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<p class="pclass">我的第一个段落。<a>你好</a></p>
<div class="divclass">hello div</div>
</body>
</html>
.pclass a
{
color:red;
}
.divclass{
color:purple;
}
属性选择器
- 对带有指定属性的HTML元素设置样式
- 属性和值选择器
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
[title]{
color:blue;
}
[title=t]{
color:red;
}
</style>
</head>
<body>
<h1 title>我的第一个HTML页面</h1>
<p title="t">我的第一个段落。</p>
</body>
</html>
如果没有值，则按属性选择器显示，如果有值则按照属性和值选择器显示
背景
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图片设置为背景
background-position 设置背景图片的起始位置
background-repeat 设置背景图片是否以及如何重复
background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域
文本
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中的文本首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
text-shadow 向文本添加阴影
text-wrap 规定文本的换行规则
字体
font-family 设置字体系列
font-size 设置字体的尺寸
font-style 设置字体风格
font-variant 以小型大些或正常字体显示文本
font-weight 设置字体的粗细
链接
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接上方
a:active 链接被点击的时刻
text-decoration用于去掉链接中的下划线
background-color
设置text-decoration:none
列表
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型
表格
border 边框
boder-collapse 合并边框
width 宽
height 高
text-align 对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr class="hao">
<td>吴明泽</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>男</td>
</tr>
<tr class="hao">
<td>小周</td>
<td>20</td>
<td>女</td>
</tr>
</table>
</body>
</html>
#tb{
border-collapse:collapse;
width:200px
}
#tb td{
border:1px solid black;
padding: 5px;
}
#tb th{
text-align:center;
background-color:black;
color:white;
}
#tb tr.hao td{
color:red;
background-color:grey;
}
轮廓
outline 设置轮廓属性
outline-color 设置轮廓颜色
outline-style 设置轮廓样式
outline-width 设置轮廓宽度
定位
- CSS定位
** 改变元素在页面上的位置 - CSS定位机制
** 普通流：元素按照其在HTML中的位置顺序决定排布的过程
** 浮动：
** 绝对布局
position 把元素放在一个静态的、相对的、绝对的、固定的位置中
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素垂直对齐方式
z-index 设置元素的堆叠顺序
CSS position属性
- static
- relative
- absolute
- fixed 随着页面动
CSS z-index属性
z-index: 1;
谁的值大，谁在前面
浮动
float属性可用的值：
left:元素向左浮动
right：元素向右浮动
none：元素不浮动
inherit：从父级继承浮动属性
clear属性
去掉浮动属性
clear属性值：
left、right：去掉元素向左、向右浮动
both：左右两侧均去掉浮动
inherit：从父级继承来的clear属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div id="container"><div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
<div id="text">hello world</div>
</div>
</body>
</html>
#fd{
width:50px;
height:50px;
background-color:red;
float:left;
}
#sd{
width:50px;
height:50px;
background-color:blue;
float:left;
}
#td{
width:50px;
height:50px;
background-color:green;
float:left;
}
#text{
clear:left;
}
#container{
width:100px;
height:500px;
background-color:grey
}
盒子模型
margin、boder、padding、content部分组成
内边距
padding 设置所有边距
padding-bottom 设置底边距
padding-left 设置左边距
padding-right 设置右边距
padding-top 设置上边距(px)
边框
border-style 边框样式
border-top-style
border-left-style
border-right-style
border-bottom-style
border-width 边框宽度
bottom-top-width
bottom-left-width
bottom-right-width
bottom-bottom-width
border-color 边框颜色
bottom-top-color
bottom-left-color
bottom-right-color
bottom-bottom-color
border-radius 圆角边框
box-shadow 边框阴影(10px 10px 5px red)
border-image 边框图片
外边距
margin 设置所有的边距
margin-bottom 设置底边距
margin-left 设置左边距
margin-right 设置右边距
margin-top 设置上边距
外边距合并
两个盒子的外边距会合并，按照边距多的合并
对齐操作
- 使用margin属性进行水平对齐（margin：0px auto）
- 使用position属性进行对齐
- 使用float属性进行对齐
分类
尺寸操作
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度
分类操作
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display 设置是否及如何显示元素
float 定义元素在哪个方向浮动
position 把元素放置到一个静态的、相对的、绝对的固定的位置
visibility 设置元素可见或者不可见
导航栏
垂直导航栏
ul{
list-style-type:none;
margin:0px;
padding:0px;
}
a:link,a:visited{
text-decoration:none;
display:block;
background-color:red;
width:50px;
text-align:center
}
a:active,a:hover{
background-color:blue;
}
水平导航栏
ul{
list-style-type:none;
margin:0px;
padding:0px;
}
a:link,a:visited{
text-decoration:none;
display:block;
background-color:red;
width:50px;
text-align:center
}
a:active,a:hover{
background-color:blue;
}
li{
float:left;
padding:3px;
font-size:20px;
font-weight:bold;
}
图片
opacity:0.5; 透明度
选择器
元素选择器
例如
h1{}
a{}
选择器分组
例如
h1,h2{}
同配符
*{}
类选择器详解
1.类选择器
.class{}
2.结合元素选择器
a.class{}
3.多类选择器
.class.class{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<p class="p1">我的第一个段落。</p>
<p class="p2">我的第一个段落。</p>
<p class="p1 p2">我的第一个段落。</p>
</body>
</html>
.p1{
font-size:30px
}
.p2{
color:red;
}
.p1.p2{
background-color:lightblue;
}
id选择器
- ID只能在文档中使用一次，而类可以使用多次
- ID选择器不能结合使用
- 当结合js的时候，需要使用id
属性选择器
[title]{}
[title~="title"]{} 包含title都会变化
<p title="title">你好</p>
<p title="title hello">你好</p>
后代选择器
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<p>我的<strong>第一个</strong>段落。</p>
</body>
</html>
p strong{
color:red
}
可以很多层
子元素选择器
p>strong{
color:red;
}
只能一层
相邻兄弟选择器
没什么用
3D转换
2D转换方法
translate()
-webkit-transform:translate(100px,100px); //safari chrome
rotate()
transform:rotate(60deg);
scale()
transform:scale(1,2); //宽高度的倍数
skew()
transform:skew(50deg,50deg); //绕着X轴倾斜，绕着Y轴倾斜
matrix()
3D转换方法
rotateX(deg)
rotateY(deg)
过渡
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间
动画
div{
animation: anim 5s infinite alternate;
}
@keyframes{
0%{background:red; left:0px;top:0px}
25%{background:red; left:0px;top:0px}
50%{}
75%{}
100%{}
}
多列
column-count
column-gap
column-rule
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div class="div1">
大家好，我是小周！
大家好，我是小周！
大家好，我是小周！
大家好，我是小周！
大家好，我是小周！
大家好，我是小周！
大家好，我是小周！
大家好，我是小周！
大家好，我是小周！
</div>
</body>
</html>
.div1{
column-count:3;
column-gap:10px;
column-rule:5px outset red;
}
CSS瀑布流效果
.container{
column-width:250px;
column-gap:5px;
}
.container div{
width:250px;
margin:5px o;
}
.container p{
text-align:center;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
