目录
一.什么是css?
二.CSS引入方式
四.字体样式
五.文本样式
六.盒子模型
七.浮动
八.定位
一.什么是css?
CSS(Cascading Style Sheets)层叠样式表,专注于页面的表现层。
二.CSS引入方式
1.行内样式
在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;...” 属性
把所有的css样式都写在标签内,放在head标签内
把所有的css样式均放在一个css单独的文件里(后缀名xx.css),在html里通过来引入外部的css。
优先级:
行内最大,其次 谁离标签近,谁的优先级高(最晚优先级最高)
三.选择器
*{}
标签名{} 例如:p{}
.类值{} 例如:.content{}
拓展: 选择器.类值{} div.box{} 类叫box的div元素
#id值{} 例如:#con{}
选择器a 选择器b{} 选择器a里的所有选择器b 选择器b只要被选择器a包着
.box div{} 类box里的所有div元素
扩展:
选择器直接子元素
选择器a>选择器b{} 选择器a里的所有直接选择器b 父子关系
.box>span{} 类box里的所有直接子元素span
选择器1,选择器2,....{}
选择器权重:
行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
四.字体样式
1. font-family 字体系列
例如:font-famiy:”宋体”,”微软雅黑”,...
值:1)normal 默认 不倾斜
2)italic 斜体
3)oblique 倾斜
值:1)bold 粗体
2)bolder 更粗体
3)lighter 细体
4)100-900 数值越大,字体越粗
值:1)数值+单位
缩写:
font : font-style值 font-weight值 font-size值/line-height值 font-family值
五.文本样式
1. text-decoration 文本修饰
值:1)none 无修饰
2)underline 下划线
3)line-through 中划线
4)overline 上划线
2. text-align 文本对齐方式
值:1)left 默认 左对齐
值:数值+单位(px或em) 为正数时,缩进;为负数时,悬挂
值:1)uppercase 全大写
值:1)ellipsis 文本溢出以省略号显示
文本溢出以省略号显示
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap; 强制不换行
值:1)visible 默认 溢出部分可见
六.盒子模型
1.border 边框
border-width 边框的宽度
border-color 边框的颜色
border-style 边框的样式
值:1)solid 实线
2)double 双实线
3)dotted 点状线
4)dashed 虚线
....
缩写:
border : border-width值 border-style值 border-color值;
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
缩写:
padding:值; 上下左右的内边距一样
padding:值1 值2; 值1代表上下内边距,值2代表左右内边距
padding:值1 值2 值3; 值1代表上内边距,值2代表左右内边距,值3代表下内边距
padding:值1 值2 值3 值4; 值1代表上内边距,值2代表右内边距,值3代表下内边距,值4代表左内边距,按照顺时针方向。
margin-top 上外边距
margin-bottom 下外边距
margin-left 左外边距
margin-right 右外边距
缩写:
margin: 同padding
margin:0 auto; 块级元素居中显示
值:url(“图片的路径”)
值:a)repeat 默认 水平、垂直都平铺
b)no-repeat 水平、垂直都不平铺
c)repeat-x 水平平铺
d)repeat-y 垂直平铺
语法: x轴坐标 y轴坐标
值:a)表示位置的英文单词 例如:left center right top bottom
b)百分比
c)数字+单位
5)background-size 背景图片的大小
语法:背景图片的宽度 背景图片的高度
值:a)百分比 (盒子的百分比)
b)数字+单位
c)cover 背景图片等比例的扩展至足够大,以使它铺满整个区域,可能会引起图片裁剪。
d)contain 背景图片等比例地扩展至足够大,以使它的宽度或高度适应内容区域,可能会使区域留白。
值:a)padding-box 默认 从左上角内边距的位置开始渲染
b)content-box 从内容区域左上角开始渲染
c)border-box 从左上角边框区域开始渲染
值:1)scroll 默认 图片随页面其余部分滚动而滚动
2)fixed 图片固定不动
缩写:
background : 背景颜色 背景图片 背景是否平铺 背景位置/背景大小 背景渲染位置 背景是否固定;
七.浮动
float 浮动
值:
清除浮动:
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动
clear:none 不清除浮动
4)给有浮动的子元素的父元素增加伪元素,在伪元素里增加样式
::after{
display:block;
content:””;
clear:both;
}
八.定位
position 定位
值:
借助left、right、top、bottom这四个值改变元素位置
z-index 值:数字 z轴的排列顺序 z-index值越大越在最上层
九. 其他:
伪类
:link 未访问的状态
:visited 访问后的状态
:hover 鼠标悬停时的状态
:active 鼠标激活时的状态
LoVe HAte 爱恨原则
元素的相互转换
其他元素转换为块级元素 display:block
其他元素转换为行内元素 display:inline (内边距都能设置 外边距只能设置左右的外边距)
其他元素转换为行内块级元素 display:inline-block
任何元素隐藏 display:none
CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color,text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
常用的css命名规则
头:header top
内容:content/container / main
尾:footer bottom
导航:nav navigation navlist subnav
侧栏:sidebar
栏目:column cols
页面外围控制整体布局宽度:wrapper
左右中:left right center navleft headerleft
登录条:loginbar login
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news news_list
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg message
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; } .fz12px{}
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; } .fl{float:left;} .fr{float:right;}
(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css / common.css / static.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css