CSS
CSS语法规范:
<head>
<style>
选择器 {
属性:值;
}
</style>
</head>
CSS基础选择器
//标签选择器
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
//类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
标签通过设置class属性来调用其类名,同时可多类名,例子:
.Rower {
属性1:属性值1;
}
.rower {
属性1:属性值1;
}
<div class="Rower rower"> Rower </div>
//id选择器
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义,id选择器在一个HTML里面只能被调用一次(规范)
#id名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
例子:
#Rower{
属性1:属性值1;
}
<div id="Rower"> Rower </div>
//通配符选择器
通配符选择器使用"*"定义,表示选取页面中所有元素
* {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
例子:
* {
margin:0;
padding:0;
}
CSS字体属性
//字体系列
标签 {
font-family: "微软雅黑","Microsoft Yahei";
}
//字体大小
标签 {
font-size: 20px;
}
//字体粗细
标签 {
font-weight: 100-900;
400为不加粗
700为加粗
}
//字体样式
标签 {
font-style: italic; 字体倾斜
font-style: normal; 让倾斜字体变正常
}
//font复合属性
标签 {
font: font-style font-weight fongt-size/line-height font-family;
font: normal 700 20px/40px "微软雅黑"; font-size和font-family必须存在,且不能打乱顺序
}
CSS文本属性
//文本颜色
标签 {
color: red;
color: #ff0000;双击选中悬停
}
//文本对齐
标签 {
text-align: center; 居中
text-align: left; 左对齐
text-align: right; 右对齐
}
//文本装饰
标签 {
text-decoration: none; 没有装横线
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 删除线
}
//文本缩进
标签 {
text-indent: 20px;
text-indent: 2em; 相对单位 1em=font-sizep:px
}
//行间距
标签 {
line-height: 26px;
}
CSS引入方式
//外部样式表
<head>
<link rel="stylesheet" href="css表">
</head>
//内部样式表
<head>
<style>
选择器 {
属性:值;
}
</style>
</head>
//行内样式表
<body>
<p font...></p>
</body>
CSS复合选择器
//后代选择器
元素1 元素2 { 样式说明 }
类名 元素 { 样式说明 }
元素1是父级,元素2是子级
例子:
ol li { color:red; }
//子选择器
元素1>元素2 { 样式说明 }
元素2必须是元素1的亲儿子
例子:
div>p { 样式说明 }
//并集选择器
元素1,
元素2 { 样式说明 }
以逗号隔开,规范是竖着写
例子:
div,
p { 样式说明 }
//链接伪类选择器
a:link { 样式选择 }选择所有未被访问的链接
a:visited { 样式选择 } 选择所有已被访问的链接
a:hover { 样式选择 } 选择鼠标指针位于其上的链接
a:active { 样式选择 } 选择活动链接(鼠标按下未弹起的链接)
要按顺序声明LVHA,平常一般只需要hover
//:focus伪类选择器
用于选取获得焦点的表单元素
例子:
input:focus { 样式选择 }
元素显示方式
HTML元素一般分为块元素和行内元素两种
//块元素
常见的块元素有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等
特点:
(1)独占一行
(2)高度,宽度,外边距以及内边距都可以控制
(3)宽度默认容器的100%
(4)是个容器,里面可以放行内或块级元素
注意:
(1)文字类的元素不能使用块级元素
//行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
特点:
(1)相邻行内元素在一行上,一行可以显示多个
(2)高、宽直接设置是无效的
(3)默认宽度就是它本身内容的宽度
(4)行内元素只能容纳文本或其他行内元素
注意:
链接里面不能放链接
特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
//行内块元素
<img />,<input />,<td />,同时具有块元素和行内元素特点
特点:
(1)一行显示多个
(2)默认宽度就是本身宽度
(3)高度、宽度、外边距以及内边距都可以控制
//元素显示模式转换
转换为块元素 display:block;
例子:
/* a { display:block }*/
转换为行内元素 display:inline;
转换为行内块元素 display:inline-block;
CSS背景
//背景颜色
background-color:颜色; 默认transparent透明色
//背景图片
background-image:none|url(图片);
//背景平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y
//背景图片位置
background-position:x y;
方位名词:无顺序,center|top|right|left|bottom
精确单位:x、y有顺序,例子:20px 50px;
混合单位:x、y有顺序,例子:20px center:
//背景图片固定
background-attachment:scroll(滚动)|fixed(固定)
//背景复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
//背景色半透明
background:rgba(0,0,0,0.3)
a指的是alpha透明度,取值在0~1之间
CSS盒子模型
//盒子模型
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,包括:边框、外边距、内边距和实际内容。
border 边框
content 内容
padding 内边距
margin 外边距
//边框border
border-width:边框粗细,px
border-style:边框样式
border-color:边框颜色
border:1px solid red;
border-top、border-bottom、border-right、border-left
border-collapse:表格细线边框合并,collapse
//内边距padding
padding-top、padding-bottom、padding-right、padding-left
padding:5px;上下左右5px
padding:5px 10px;上下5px。左右10px
padding:5px 10px 20px;上5px,左右10px,下20px
padding:5px 10px 20px 30px;上5px,右10px,下20px,左30px
//外边距margin
margin-top、margin-bottom、margin-right、margin-left
margin:5px;上下左右5px
margin:5px 10px;上下5px。左右10px
margin:5px 10px 20px;上5px,左右10px,下20px
margin:5px 10px 20px 30px;上5px,右10px,下20px,左30px
水平居中 margin:0 auto;
外边距合并 overflow:hidden;
圆角边框
border-radius:length;
例子
border-radius:10px;
border-radius:50%;
border-radius:10px 20px 30px 40px;左上开始顺时针
分开写
border-top-left-radius:10px;
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
例子:
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);
文字阴影
text-shadow:h-shadow v-shadow blur color;
CSS浮动
//浮动
选择器 { float: 属性值; }
属性值:none/right/left;
例子:div { float:left ;}
//浮动特性
1.脱离标准普通流的控制移动到指定位置,俗称脱标;
2.浮动的盒子不再保留原先的位置;
3.浮动元素具有行内块元素特性;
常见网页布局
清除浮动
选择器 { clear: 属性值;}
属性值:left、right、both
//额外标签法
在父盒子的末尾空的子盒子并添加 clear:both;
注意必须用块级元素的子盒子
//父盒子添加overflow
属性值:hidden、auto、scroll;
例子: overflow:hidden;
//:after伪元素法
一样是给父盒子建立样式,添加.clearfix即可。
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
//双伪元素清除浮动
一样是给父盒子建立样式,添加.clearfix即可。
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
CSS定位
定位:将盒子定在某一个位置;
定位=定位模式+边偏移
position:属性值1;
属性2:px;
属性值1:
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
属性值2:
top、bottom、left、right
//定位叠放次序
选择器: z-index:1
CSS元素的显示与隐藏
//display
display:none; 隐藏元素
display:block; 除了转换为块级元素以外,同时还有显示元素的意思
display隐藏元素后,不再占有原来的位置
//visibility 可见性
visibility:visible; 元素可视
visibility:hidden; 元素隐藏
visibility隐藏元素后,继续占有原来的位置
//overflow 溢出
overflow: visible; 不剪切内容也不添加滚动天
overflow: hidden; 不显示超过对象尺寸的内容,超出的部分隐藏掉
overflow: scroll; 不管超出内容否,总是显示滚动条
overflow: auto; 超出自动显示滚动条,不超出不显示滚动条
CSS精灵图
字体图标
//展示的是图标,本质属于字体
iconfont
//字体图标下载
推荐网站:
icomoon字库:http://icomoon.io
阿里iconfont字库:http://iconfont.cn/
CSS三角做法
.sanjiao {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 20px solid transparent;
border-left-color: red;
}
CSS用户界面样式
//鼠标样式cursor
cursor: 属性值;
属性值:
default 小白(默认)
pointer 小手
move 移动
text 文本
not-allowed 禁止
//取消表单轮廓
<input type="text" name="">
input
outline:none;
//防止拖拽文本域
textarea
resize: none;
CSS初始化
*{
margin:0;padding:0
}
em,
i{
font-style:normal
}
li{
list-style:none
}
img{
border:0;vertical-align:middle
}
button{
cursor:pointer
}
a{
color:#666;text-decoration:none
}
a:hover{
color:#c81623
}
button,
input{
font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}
body{
-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}.hide,.none{display:none
}
.clearfix:after{
visibility:hidden;clear:both;display:block;content:".";height:0
}
.clearfix{
*zoom:1
}
CSS其他知识点
//起始去掉默认外边距和内边距
*
margin:0;
padding:0;
//去掉序列前图标
li list-style:none;
//实现行内块与文字垂直居中对齐
vertical-align: 属性值;
属性值:
baseline 默认,元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
//溢出单文本省略号表示
1.先强制一行内显示文本
white-space: nowrap;
2.超出的部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow: ellipsis;
//溢出多文本省略号表示
overflow: hidden;
text-overflow: ellipsis;
1.弹性伸缩盒子模型显示
display: -webkit-box;
2.限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
3.设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;