前端_css
来源:互联网 发布:网络实名制 知乎 编辑:程序博客网 时间:2024/05/19 19:41
Cascading Style Sheets 层叠样式表
一、基本样式:
内联:<span style="color:red;font-size:10px;" >text</span>
嵌入:<style type="text/css">span{color:red;font-size:10px;}</style>
外部:<link href="style.css" rel="stylesheet" type="text/css">
适用情况
内联式:局部特殊化
嵌入式:统一标签样式格式
外联式:方便代码重用和管理
rel是relationship的英文缩写
stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思
rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表
二、选择器:
1.标签选择器
2.类选择器:
.setGreen{color:green;}
<span class=“setGreen”>text</span>
3.id选择器:
#setGreen…
同一页面头体脚只出现一次,用id
class可以并列使用,id不行
4.子选择器:
> 选择指定标签元素的第一代子元素
.first>span{color:red;
}
5.包含(后代)选择器
空格
6.通用选择器:
* 匹配所有标签
7.伪选择器:
a:hover{color:red;}
8.分组选择器:
.first,#second span{color:green;}
三、特性
1.继承性:color可继承,border不可继承
2.特殊性:权值:
标签:1
类:10
id:100
3.层叠:权值一样时就近原则
4.重要性:!important
区分:
继承是指标签的样式可以由子代继承,但有些标签是不能继承的,eg:border。
特殊性指用用权重来确定最后起作用的样式,id=100,class=10,标签=1,继承=0.1;
层叠指当权重相同时,后面的样式覆盖前面的样式。
四、排版:
字体:body{font-family:"Microsoft Yahei";}
字号颜色:body{font-size:12px;color:#666}
粗体,斜体
文本修饰:underline,overline,line-through,blink
缩进:1em=16px(浏览器默认字体高度)
行间距,字间距
五、盒模型
元素分类:
块状元素都自带换行效果;
内联元素都是定义行内小区域且不换行,但如果没有内容就没有意义,不占空间;
内联块状元素除了不换行,即使没有内容也会占空间。
转换:
转为块状:a{display:block;}
转为内联:div{display:inline}
边框、宽高、填充、边界
- 前端_css
- 前端_CSS#background-position学习
- Web前端学习(2)_css
- 黑马程序员_css总结
- 黑马程序员_CSS篇
- 黑马程序员_CSS篇
- JavaScript<二>_css
- 黑马程序员_CSS心得
- 黑马程序员_CSS语言
- 黑马程序员_CSS
- javaWeb基础_CSS
- 可折叠的标题栏_CSS
- D 02_CSS简述
- 网页常用命名规范_CSS命名规范_CSS书写规范
- 黑马程序员_CSS入门小结
- 毕向东_JavaScript视频教程_css
- CSS学习笔记_CSS选择器
- JavaEE第二天_css+js
- TCP/IP详解--举例明白发送/接收缓冲区、滑动窗口协议之间的关系
- DAY10
- 【ZOJ 3962 Seven Segment Display】
- MYSQL性能查看(命中率,慢查询)
- 从系统中的到的原始日期转换成YYYY-MM-DD
- 前端_css
- Android 新一代多渠道打包神器
- 博弈,三种博弈 巴什博奕,尼姆博奕,威佐夫博弈
- 如何提高自己的工作能力 高效工作方法是绝效
- YDT-Routesim学习(三)
- 求一个有向图G的拓扑序列
- Android分发事件
- EBS 采购订单入库
- springmvc结果的转发和重定向 (需求:在同一个请求中调用多个方法) (13)