CSS基础

CSS基础

1.css基础语法

1.1CSS是什么：

• css指层叠样式表
• 样式定义如何让显示控制HTML元素，从而实现美化html
• 样式通常存储在样式表中，目的是解决内容与表现分离问题
• 外部样式表可以极大提高工作效率
• 多个样式可以层叠为一，后者覆盖前者样式（就近原则）

1.2样式层叠次序（优先级从低到高）

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表
4. 内联样式表

1.3CSS基础语法

格式： 选择器{属性1:value ;属性2: value;…;}

注释：/*…注释的内容…*/

2.CSS使用

2.1插入样式表

html插入css样式表有三种方式：

1. 外部样式表
2. 内部样式表
3. 内联样式表

特点：作用于整个html文件

优先级：当样式冲突时采用就近原则，以离被修饰属性最近的css为主

无冲突时层叠效果

1.外部样式表

• 在head标签中使用标签导入一个css文件，作用于本html

  <link href="文件名.css" type="text/css" rel="stylesheet"/>
  

• 使用import在style标签中导入css文件

  <style type="text/css">
  	@import "文件名.css";
  	/*@import url("文件名.css")*/
  </style>
  

2.内部样式表

• 在head标签中使用style标签设置css样式

  <style type="text/css">
  	...样式...
  </style>
  /*只作用于当前页面*/
  

*3.内联样式

• 在任意html标签中使用style属性设置css样式

  <html标签 style="属性1:value ;属性2: value;...">被修饰内容</html标签>
  <p style="color:blue;font-family:隶书">哈哈哈</p>
  

比较

样式表	优点	缺点	使用情况	控制范围
内联	书写方便，权重高	没有实现样式和结构分离	较少	控制一个标签
内部	部分将结构和样式分离	没有彻底分离	较少	控制一个页面
外部	完全实现结构样式分离	需要引入	常用	控制整个站点

2.2CSS中的选择器

2.2.1css2的选择符

1. html选择符

   把html标签作为选择符使用，如p{…} 网页中的p标签全部使用此样式

   h2{…} 网页中的h2标签全部使用此样式

2. class选择符

   格式：.类名{样式...}匿名类

   使用：<html标签 class="类名">...</html标签>

   如.hh{color:blue;}class属性为hh的全部采用此样式

   ul.hh{color:blue;}只有ul标签中class属性为hh的全部采用此样式

3. id选择符

   格式：#id{样式...}

   使用：<html标签 id="id名">...</html标签>

   注意：约定id只在网页中使用一次

   **选择符优先级（大–>小）：**id>class>html

4. 关联选择符

   格式：选择符1 选择符2 选择符3 ...{样式...}

   使用：table a{…}/*只有table中的a采用*/

5. 组合选择符

   格式：选择符1,选择符2,选择符3,...{样式...}

   使用：h1，h2，h3{样式…}

6. 伪类选择符

   格式：标签名:伪类名{样式...}

   使用：

   a:link {color: #FF0000; text-decoration: none} /* 未访问链接 */
   a:visited {color: #00FF00; text-decoration: none} /* 已访问链接 */
   a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
   a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
   

2.2.2css3的选择器

1.关系选择器

div>p选择所有作为div元素的子元素p

div+p选择紧贴div元素之后的元素p

div-p选择所有div元素之后的兄弟元素p

2.属性选择器

[attribute]选择具有attribute属性的元素

[attribute=value]选择具有attribute属性且值等于value的元素

[attribute~=value]选择具有attribute属性且值是用空格隔开的字词列表，其中一个等于value的元素

[attribute|=value]选择具有attribute属性且值为以value开头用“-”连接符分割的字符串的E元素

[attribute^=value]匹配具有attribute属性且值以value开头的E元素 。E[attribute^=“value”]

[attribute$=value]匹配具有attribute属性且值以value结尾的E元素

[attribute*=value]匹配具有attribute属性且值含有value的E元素

3.结构性伪类选择器

4.状态伪类选择器

:link 选择所有未被访问的链接。
:visited 选择所有已被访问的链接。
:active 选择活动链接。
*:hover 选择鼠标指针位于其上的链接
*:focus 选择获得焦点的 input 元素。
:target 选择当前活动的 #news 元素。
:enabled 选择每个启用的 元素。
:disabled 选择每个禁用的 元素
:checked 选择每个被选中的 元素
:not(selector) 选择非

元素的每个元素。
::selection 选择被用户选取的元素部分。

5.其他伪类选择器

具体解析查看 https://www.w3school.com.cn/cssref/css_selectors.asp

3.CSS常用属性

3.1尺寸与单位

1. 尺寸

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JkqqCKa5-1597058495529)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809303845.png)]

2. 颜色

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAyHJlVa-1597058495536)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809323235.png)]

3. 颜色属性值

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vwMfiCGe-1597058495568)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809336354.png)]

3.2字体属性值：font

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0J6WOWbh-1597058495579)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809379809.png)]

3.3文本属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yi8iUxNe-1597058495583)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809404436.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jo22IL5o-1597058495588)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809423276.png)]

3.4背景属性：background

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tgmbvG0o-1597058495596)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809477274.png)]

3.5边框

盒子模型：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YfXfmKXJ-1597058495600)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809522117.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESGiDYI4-1597058495611)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809546326.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fB2zVTSf-1597058495616)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809557431.png)]

3.6内补丁

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uuKyOImH-1597058495619)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809587729.png)]

3.7外补丁

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQOis8ZO-1597058495628)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809610377.png)]

3.8Position定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFIoCpjW-1597058495632)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809637795.png)]

3.9Layout布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1risukDM-1597058495637)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809658979.png)]

3.10Flexible Box 弹性盒子（旧版）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-04iXuG5i-1597058495646)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809709938.png)]

3.10Flexible Box 弹性盒子（新版）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LPoW9Gs6-1597058495649)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809747199.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-79Rwgaa0-1597058495672)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809767651.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9gTu8Qp-1597058495680)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809790891.png)]

3.10.2容器上的6个属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W95UtSRF-1597058495686)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809882241.png)]

3.10.3项目上的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgdMeb1x-1597058495689)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809893512.png)]

3.11用户界面User Interface

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMLSD19p-1597058495698)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809924755.png)]

3.12多栏Multi-column

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2k1cFFPI-1597058495702)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809962542.png)]

3.13表格相关属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0rpRhWBu-1597058495706)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596809988081.png)]

3.14过度Transition

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Hpg9WEh-1597058495716)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596810016312.png)]

3.15动画Animation

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQLJ3Ile-1597058495719)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596810039468.png)]

3.162D变换2DTransform

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M6K08mIl-1597058495722)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596810079394.png)]

3.17Media Queries Properties媒体查询

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UId7UFkS-1597058495728)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596810120848.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-boFO7sVL-1597058495731)(C:\Users\41209\AppData\Roaming\Typora\typora-user-images\1596810134366.png)]

4web字体

1597058495716)]

3.15动画Animation

[外链图片转存中…(img-LQLJ3Ile-1597058495719)]

3.162D变换2DTransform

[外链图片转存中…(img-M6K08mIl-1597058495722)]

3.17Media Queries Properties媒体查询

[外链图片转存中…(img-UId7UFkS-1597058495728)]

[外链图片转存中…(img-boFO7sVL-1597058495731)]

4web字体