2.1 CSS 简介特性

最新推荐文章于 2024-07-11 17:28:05 发布

HuaLuLemon

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量192

点赞数

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/Yuanshigou9/article/details/134220357

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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)

- - 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>

- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度:由内容撑开。
- 默认高度:由内容撑开。
- 无法通过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…