特性"/>
2.1 CSS 简介特性
1.CSS 简介
- CSS的全称为:层叠样式表(Cascading Style sheets )。
- CSS3是CSS2的升级版本,它在CSS2的基础上,新增了很多强大的新功能,从而解决一些实际面临的问题。.
- CSS3在未来会按照模块化的方式去发展: CSS current work & how to participate
- CSS3的新特性如下:
-
- 新增了更加实用的选择器,例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
- 新增了更好的视觉效果,例如:圆角、阴影、渐变等。
- 新增了丰富的背景效果,例如:支持多个背景图片,同时新增了若干个背景相关的属性。
- 新增了全新的布局方案――弹性盒子。
- 新增了Web字体,可以显示用户电脑上没有安装的字体。
- 增强了颜色,例如: HSL、HSLA、RGBA几种新的颜色模式,新增opacity属性来控制透明度
- 增加了2D和3D变换,例如:旋转、扭曲、缩放、位移等。
- 增加动画与过渡效果,让效果的变换更具流线性、平滑性。
2.私有前缀
- 什么是私有前缀:例如"-webkit-"
div {width: 400px;height: 400px; -webkit-porder-radius: 20px;
}
- 为什么要有私有前缀
-
- W3C标准所提出的某个CSS特性,在被浏览器正式支持之前浏览器厂商会根据浏览器的内核,使用私有前缀来测试该CSS特性,在浏览器正式支持该CSS特性后,就不需要私有前缀了。
- 查看CSS3兼容性的网站:www.caniuse
- 常见浏览器私有前缀
-
- Chrome浏览器: -webkit-
- Safari浏览器: -webkit-
- Firefox浏览器:moz-
- Edge浏览器: -webkit-
3.CSS 样式表
- 行内样式:写在标签的style属性中
- 内部样式:写在style标签中
- 外部样式:<link rel="stylesheet" href="">
- 样式表的优先级:行内 > (内部 = 外部)(后来者居上)
4.长度单位
- px:像素
- em:相对元素font-size的倍数。
- rem :相对根字体大小(html)
- %:相对父元素计算。
- vw视口宽度的百分之多少10vw 就是视口宽度的10%。
- vh视口高度的百分之多少10vh就是视口高度的10%。
- vmax视口宽高中大的那个的百分之多少。(了解即可)
- vmin视口宽高中小的那个的百分之多少。(了解即可)
- CSS中设置长度,必须加单位,否则样式无效!
5.CSS 三大特性
- 层叠性
-
- 如果发生了样式冲突,那就会根据一定的规则(选择器优先级),进行样式的层叠(覆盖)。
- 继承性
-
- 概念:元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
- 规则:优先继承离得近的。
- 常见的可继承属性: text-?? 、font-?? 、line-?? 、color ......
- 优先级
-
- !important>行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承的样式
- 权重:(a,b,c)
-
-
- a:ID选择器的个数
- b:类、伪类、属性选择器的个数
- c:元素、伪元素选择器的个数
-
-
- 注意事项:
-
-
- 计算权重时,并集选择器的每一个部分是分开算的!
-
6.元素显示模式
- 块元素(block)
主体结构标签: <html> . <body>
排版标签: <h1> ~ <h6> 、 <hr> . <p>. <pre> . <div>
列表标签: <ul> . <ol> . <li> 、 <dl> . <dt> 、 <dd>
表格相关标签: <table> , <tbody> , <thead> , <tfoot> , <tr> . <caption>
< form >与<option>
-
- 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
- 默认宽度:撑满父元素。
- 默认高度:由内容撑开。
- 可以通过CSS设置宽高。
- 行内元素(inline)
文本标签: < br >、< em >、<strong> 、<sup> 、<sub>、<del> 、<ins>
<a>与<label>、<span>
-
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列。
- 默认宽度:由内容撑开。
- 默认高度:由内容撑开。
- 无法通过CSS设置宽高。
- 行内块元素(inline-block)
图片: <img>
单元格: <td> . <th>
表单控件: <input> . <textarea> . <select> . <button>
框架标签:<iframe>
-
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列。
- 默认宽度:由内容撑开。
- 默认高度:由内容撑开。
- 可以通过CSS设置宽高。
- display属性:
-
- none:元素会被隐藏。
- block:元素将作为块级元素显示。
- inline:元素将作为内联元素显示。
- inline-block:元素将作为行内块元素显示。
CSS 书写顺序
1、定位属性:position display float left top right bottom overflow clear z-index
2、自身属性:width height padding border margin background
3、文字样式:font-family font-size font-style font-weight font-varient color
4、文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5、css3中新增属性:content box-shadow border-radius transform…
更多推荐
2.1 CSS 简介特性
发布评论