CSS基础
基础语法
美化网页,布局页面,设置外观
css样式表也是一种标记语言
组成:选择器{样式} 给谁改什么样式
写在head标签内部style标签内部
<style>
p {
color:red;
font-size:12px;
}
</style>
键值对用分号结尾
属性与值之间用冒号分割
css选择器
标签选择器
标签名做选择器:某一类标签全部选出来
类选择器class
语法:.类名{属性与值} 可以多次调用
<style>
.red{color: red;}
</style>
<ul>
<li class='red'>冰雨</li>
<li>七里香</li>
</ul>
一个标签可以有多个类名 中间用空格隔开
<div class="red font35">
属性选择器id
属性名做选择器语法:#id名{样式} 只能调用一次,别的不可调用,在使用次数上
#pink{color:pink;}
<div id="pink">迈克尔</div>
通配符选择器
*所有的标签改为同一个样式
*{样式}
*{margin: 0;
padding: 0;}
字体属性
字体类型:font-family
body{font-family:‘宋体’, ‘微软雅黑’, ‘Microsoft YaHei’;}
字体大小:font-size 注意px单位
body{font-size:16px;}标题标签比较特殊,需要单独指定大小
字体粗细:font-weight
font-weight:bold,bolder,lighter
也可直接加数字
font-weight: 700; 标准为400;700为bold
font-style:normal;
字体复合属性:简写方式
font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px ‘宋体’;(不能颠倒顺序)
前两个可以省略,后两个必须有:font: 20px,“宋体”;
文本属性
文本颜色:color: 颜色名red或十六进制#ff0000或rgb(255,0,0); 十六进制用最多
文本对齐:text-align水平对齐方式 center,right,left(默认)
文本装饰:text-decoration underline,overline,line-through,none(默认)
取消链接默认下划线 设置a标签为none
文本缩进:text-indent:20px或2em;只是首行缩进 em单位,当前元素1个文字大小
行间距:line-height:26px;行间距包括文本间距、上下间距
css引入方式
按照引入方式,分为三大类:内部样式表、外部样式表、行内样式表(比较简单的样式)
内部样式表:放入style标签内 放入head标签内
行内样式表:<div style='color:red;'></div>
外部样式表:新建后缀为.css文件;里面只有样式
在html中使用link标签引入这个文件<link rel="stylesheet" href='css文件路径'>
在head标签中
Emmet语法
快速生成html标签
div*3+tab键
ul>li父子关系
div+p兄弟关系
.nav 类名 #id名默认为div生成的 有类名或id名
p.navp生成的 p#two生成
生成有序号的.demo$*5tab
div{我喜欢你} 内部写内容
div{喜欢你}*5
div{$}*样式
快速生成css
text-align:center
tac 加tab就可
输入首字母
ti2em:text-indent:2em;
w100:width:100px;
text-decoration:none; tdn
复合选择器
后代选择器
语法:父亲元素 子元素1 子元素2{样式} 中间空格隔开
标签或类任意基础选择器都行
ul li a
.nav li a
子元素选择器
只能选某元素最近一级,儿子,不能孙子
语法: 元素1>元素2{样式}
并集选择器
可以选择多组标签,定义相同样式
语法:元素1,元素2,元素3{样式}
伪类选择器
给链接添加特殊效果
前面用冒号:
链接伪类
- a: link 所有未被访问的链接
- a: visited 已被访问的链接
- a: hover 鼠标指针位于其上的链接
- a: active 活动链接,鼠标按下未松开时
注意: 按这个顺序写,链接需要单独指定样式
focus伪类选择器
选取获得焦点(光标)的表单元素input类
语法:input:focus{样式}
元素显示模式
元素以什么方式进行显示 一般分为块元素和行内元素
块元素:独占一行,可设置高度和宽度,宽度默认为100%,里面可以放行内元素 文字类元素不可放块元素
行内元素:一行可设置多个,不可直接设置高度和宽度
链接里面不可放链接,a里面可以放块级元素
行内块元素:img、input、td等标签 高度宽度可以设置、一行可以多个
元素显示模式的转换
把行内元素a转换为块元素
a{display:block;width:150px;height:50px;}
把块元素转为行内元素
div{display:inline;}
行内元素转为行内块元素
span{display:inline-block;}
单行文字垂直居中
在盒子里垂直居中:使文字line-height=盒子height
CSS的背景
背景颜色:h1 {background-color:#6495ed;}
背景图片:p{background-image:url(‘paper.gif’);}
背景平铺:background-repeat:repeat-x no-repeat默认平铺
背景位置:background-position:right top; x y;(可以为方位名词顺序无影响(若一个省略,则另一个默认居中对齐),或为精确单位,前一个为x,后一个为20px 50px ) 中间空格隔开 可混合使用,前一个为x,后一个为y
简写属性:body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}
当使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment fixed(固定)scoll(滚动)默认 背景图像是否固定或者随着页面的其余部分滚动。
background-position
顺序不强制 用空格隔开
背景色半透明 background: rgba(0,0,0,0.3);0完全透明,1完全不透明 alpha透明度可以写.3省略零
直接设置不透明度
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
CSS三大特性
层叠性
样式冲突,覆盖,就近原则
样式不冲突,不层叠
继承性
子标签继承父标签的某些样式
行高的继承也可继承,行高不跟单位为当前文字大小的1.5倍
优先级
标签,类选择器
选择器优先级
- 选择器相同,层叠
- 选择器不同,由权重执行:标签《类、伪类《id《行内样式《!important
继承的权重为0
权重叠加
复合选择器如:
ul li{}0,0,0,1+0,0,0,1=0,0,0,2
li{}0,0,0,1
.nav li 0,0,1,0+0,0,0,1=0,0,1,1
列表
列表项标记类型
list-style-type:none;
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:url(‘url’);
ul
{
list-style-image: url('sqpurple.gif');
}
简写属性:type image
{
list-style: square url("sqpurple.gif");
}
移除默认标记和缩进
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
表格
表格边框
双边框
table, th, td
{
border: 1px solid black;
}
折叠边框——单边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格高度和宽度
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
text-align属性设置水平对齐方式,向左,右,或中心:
vertical-align垂直对齐属性设置垂直对齐,比如顶部,底部或中间:
td
{
text-align:right;
height:50px;
vertical-align:bottom;
}
需控制边框和表格内容之间的间距padding:15px;
向<th>
和 <td>
添加 border-bottom 属性,以实现水平分隔线:
border-bottom: 1px solid #ddd;
}
鼠标悬停表格
tr:hover {background-color: #f5f5f5;}
盒子模型
组成:margin、border、padding、content
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
border边框
边框样式 boder-style
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
border-width 属性指定四个边框的宽度。
border-color 边框颜色
设置四个值:分别为上右下左
三个值:上,右左,下
两个值:上下、右左
可分别设置个边:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
圆角边框:border-radius:5px; 可以设置四个值:左上顺时针,两个值时对角线为一对。
也可分开写:border-top-left-radius:20px; top left不可颠倒
也可以使用百分比形式 圆形为半径为宽度的一半,或者50%。
圆角矩形:设置为高度的一半;
边框
边框阴影语法:box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 5px #888888;
边框图像:border-image: source slice width outset repeat|initial|inherit;
border-image: url(border.png) 30 round;
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)
简写属性
宽度、风格、颜色——border:5px solid red;
表格边框
table,td{border:1px solid pink;}
轮廓outline属性
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
outline-style
outline-color
outline-width
outline-offset 轮廓偏移:在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
outline
简写属性:宽度、风格、颜色
margin边距属性
可以设置为以下值
auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距
可单设各边
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
简写同border
块级盒子水平居中
要设置width,margin-left:auto;或margin:0 auto;
行内元素和行内块元素水平居中
给其父级元素添加text-align:center;
外边距合并
嵌套快元素塌陷
嵌套块元素,父子元素同时有外边距,父元素会有较大外边距
解决方法:
- 为父亲添加边框transparent
- 为父亲定义内边距padding
- 为父亲添加overflow:hidden;比较简单,不改变盒子大小
清除内外边距
*{padding=0;
margin=0;}
css第一行代码
注意行内元素一般只设置左右内外边距
padding填充属性
可以设置为length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
单设各边属性
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
简写属性:同border
注意:若不指定盒子width和height,则padding不会撑开盒子