前端开发语言-CSS3
2020-03-04 10:23:01 1 举报AI智能生成
css3
作者其他创作
大纲/内容
简介
Casecading Style Sheet
定义网页表现
应用
内联 <p style="属性：值；...">
优先级别最高，但不利于维护；直接应用目标元素；
页面嵌入 <style>...</style>
样式表链接<link href=".css">
语法
选择器 {属性:值；...}
键值对
h1 { color:red; border:solid 1px #000; }
注释
/* */
选择器
全局选择器 *{...}
元素类选择器 tag{...}
ID 选择器 #id{...}
类选择器 .class{...}
层级
后代选择器: 祖先元素 后代元素{...}
ul li span { color:#ffff00; }
父子选择器: 父元素>子元素{...}
li>span { color:#ffff00; }
分组选择器 选择器1，选择器2，....{...}
基本样式
颜色
取值
十六进制 #FF0000
简写F00
RGB rgb(255,0,0)
名称 red
前景色：color
背景
背景色： background-color
背景图：background-image:url(**.jpg)
重复 background-repeat:
repeat-x
repeat-y
no-repeat
位置 background-position
left center right
top center bottom
固定 background-attachment: fixed；
简写 background:颜色 图 重复 固定 水平位置 垂直位置；
简写：background: #0f0 url(../img/bg.jpg) no-repeat left botton;
字体
字体族 font-family
font-family:"微软雅黑",“宋体”,"黑体",verdana,"Times New Roman",serif;
样式 font-style:
font-style:italic;
字号 font-size:
font-size:14/14px;
点或者像素
font-size:0.8em;
原来的0.8倍
粗细 font-weight
bold
300
文本
颜色 color
对齐 text-align
left
center
right
jusity
两端对齐
装饰线 text-decoration:
overline
上划线
line-throught
删除线
underline
下划线
转换 text-transform:
uppercase
大写
lowercase
小写
caplitalize
首字母大写
缩进 text-indent
text-indent:100px
行间距 line-height
line-height:100px
链接
a:link{}
一般状态下
text-decoration:none; color:#555;
无下划线
a:visited{}
浏览之后的效果
text-decoration:none; color:#555;
无下划线
a:hover{}
鼠标经过状态
text-decoration:none; color:#f00;
无下划线
a：active{}
正在激活的状态（正在单击）
text-decoration:none;
无下划线
爱恨 love hate顺序标记“lvha”
列表
样式 list-style-type
none
square
circle
...
位置 list-style-position
inside
outside
图片 list-style-images:url(**.jpg)
表格
边框 border
border: 1px solid #000;
横线折叠 border-collapse:colapse
border-collapse:colapse
布局 table-layout:fixed
宽度固定
隐藏空的单元格 empty-cells:hide
0 条评论
下一页
