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

天天Lotay

发布于 2022-12-01 08:24:34

6380

发布于 2022-12-01 08:24:34

文章被收录于专栏：嵌入式音视频

1.什么是CSS

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

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

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

2.css引入方法

CSS与HTML之间的关系

HTML用于构建网页的结构
CSS用于构建HTML元素的样式
HTML是页面的内容组成，CSS是页面的表现

结构层 HTML（如同人的骨骼构架）
表示层 CSS （如同人出门时的穿衣化妆）
行为层 JavaScript（如同人的走路吃饭等行为）

使用CSS样式表的方式

1.内联方式

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

<p style=“color:red;”>红色字体</p>

用分号分割

2.内部样式表

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

<head>
	        <style>
	             p{color:red;}
	        </style>
       </head>

3.外部样式表

放在<head>中

<link rel="stylesheet" href=""/>

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

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

4.导入式

	<head>
		<style>
			@import url(my.css);
		</style>
  </head>

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

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

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

3.css规则与注释

css语法

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

css注释语句

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

单行注释

<style>
  p{
       color: pink;
       /*font-family: "微软雅黑";*/
      font-siza: 20px;
   }
</style>

多行注释

   <style>
  /*    p{
           color: pink;
           font-family: "微软雅黑";
          font-siza: 20px;
       }*/
    </style>

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

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

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

  <style>
        *{
            color: #805abb;
            font-family: "宋体";
        }
    </style>

2. 元素选择器

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

<style>
        p {
         color: red;
        }
    </style>

3. 类选择器

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

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

<style>
       .libai{
           color: #f00;
       }
    </style>

4. ID选择器

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

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

<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样式表优先级总结：

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

7. div+css布局

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

div：

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-18，如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

html

登录后参与评论

0 条评论

热度