2.1 CSS 简介特性-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
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.com
- 常见浏览器私有前缀
-
- 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)
-
-
- aID选择器的个数
- 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…