【web前端阶段二】CSS巩固学习（持续更新）

2022-12-01 08:24:34 浏览数 (1)

1.什么是CSS

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

  1. 用于HTML文档中元素样式的定义 – 实现了将内容与表现分离 – 提高代码的可重用性和可维护性
  2. 文件后缀是.css

css在前端中如同一个美容师

2.css引入方法

CSS与HTML之间的关系

  1. HTML用于构建网页的结构
  2. CSS用于构建HTML元素的样式
  3. HTML是页面的内容组成，CSS是页面的表现
  • 结构层 HTML（如同人的骨骼构架）
  • 表示层 CSS （如同人出门时的穿衣化妆）
  • 行为层 JavaScript（如同人的走路吃饭等行为）

使用CSS样式表的方式

1.内联方式

直接把CSS代码用style属性添加到开始标签中

代码语言：javascript复制
<p style=“color:red;”>红色字体</p>

用分号分割

2.内部样式表

直接把CSS代码添加到头部的style标签中

代码语言：javascript复制
<head>
	        <style>
	             p{color:red;}
	        </style>
       </head>

3.外部样式表

放在<head>中

代码语言：javascript复制
<link rel="stylesheet" href=""/>

StyleSheet，的意思就是样式调用(必须要有) href，是样式路径，即URL

外部样式表是为了防止html过于臃肿而设置的

4.导入式

代码语言：javascript复制
	<head>
		<style>
			@import url(my.css);
		</style>
  </head>

优先级：行内样式>内部样式>外部样式>导入样式

css加载方式link和@import的区别，为什么不推荐使用@import?

  1. @import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。
  2. 加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。
  3. 兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。
  4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。
  5. 使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。

3.css规则与注释

css语法

  1. css是以属性/值对形式出现
  2. 属性和属性值之间用冒号（:）连接
  3. 多对属性之间用分号（;）隔开 如：color：red；

css注释语句

  • html/css 注释快捷键：
  • ctrl / 单行注释/取消注释
  • ctrl shift / 多行注释/取消注释

单行注释

代码语言：javascript复制
<style>
  p{
       color: pink;
       /*font-family: "微软雅黑";*/
      font-siza: 20px;
   }
</style>

多行注释

代码语言：javascript复制
   <style>
  /*    p{
           color: pink;
           font-family: "微软雅黑";
          font-siza: 20px;
       }*/
    </style>

4.元素选择器和通用选择器

1. 通用选择器，全局选择器（*）

可以与任何元素匹配 常用于设置一些默认样式 范围最广，但优先级最低

代码语言：javascript复制
  <style>
        *{
            color: #805abb;
            font-family: "宋体";
        }
    </style>

2. 元素选择器

HTML文档中的元素 p、b、div、a、img、body等

代码语言：javascript复制
<style>
        p {
         color: red;
        }
    </style>

3. 类选择器

.className{ } 如：.box{ color:red; } 类名不能以数字开头

注意：一个页面中class名字可以重复

代码语言：javascript复制
<style>
       .libai{
           color: #f00;
       }
    </style>

4. ID选择器

#idName{ } 如：#box{color:red;}

注意：一个页面中id相同的id名只能出现一次

代码语言：javascript复制
<style>
       #libai{
           color:orange;
       }
    </style>

一般重复使用的样式不使用ID选择器，因为ID属性是唯一的

5. 合并选择器

语法：选择器1,选择器2,…{ } 作用：提取共同的样式，减少重复代码 例如：.header,.footer{height:300px;}

优先级： ID>类>通用>元素

6.CSS样式表特征

1.继承性

指被包含在内部的标签可以拥有外部标签的样式，比如：text-*、font-*、line-*，但有些属性不能继承，比如：border、padding、margin

2.层叠性

可以定义多个样式

3.优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式

css样式表优先级总结：

  1. 相同的选择器，其样式表排序：行内样式>内部样式>外部样式(就近原则)
  2. 相同方式的样式表，其选择器排序：ID选择器>类选择器>标签选择器（范围越小越优先）
  3. 外部样式表的ID选择器>内部样式表的标签选择器

7. div css布局

内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显

div：

  1. 可定义文档中的分区或节
  2. 可以把文档分割为独立的、不同的部分。
  3. 是一个块级元素。这意味着它的内容自动地开始一个新行
  4. 通常与css进行配合，会有更加强的表现形式

布局实例时需要用到的css属性

  • width:数值
  • height:数值
  • background-color:颜色
  • float:left 使div不占据一行
css html

0 人点赞