Web前端——CSS

页面美化和布局控制

概念:cascading style sheets 层叠样式表

层叠:多个样式可以作用在同一个html的元素上,同时生效

优点:

1.功能强大

2.将内容展示和样式控制分离—— 解耦,分工协作更容易,提高开发效率

Css与html的结合方式

1.内联样式:在标签内使用style属性指定css代码;

如:<div style="color: aqua;">hello</div>

2.内部样式

在head标签内,定义style标签的标签体内容就是css代码

如<style>    div{     color: antiquewhite;    }  </style>

3.外部样式

定义css资源文件;

通过link标签引入外部资源文件

例如:css文件:

div{
  color:red;
}

引入文件:

<link rel="stylesheet" href="CSSFile/a.css">

*三种方式css作用范围越来越大,常用方式2和3。

CSS基本语法

格式:

1.选择器{

属性名:属性值;

属性名2:属性值2;

........

}

选择器:删选具有相似特征的元素。

分类

基础选择器 1.id选择器:选择具体的id属性值元素,建议一个html文件中id唯一

语法:#id属性值{}

2.元素选择器:选择具有相同标签名的元素

语法:标签名{}

3.类选择器:选择具有相同的class属性值的元素

语法:.class属性值{}

*优先级:id>类>元素

扩展选择器: 1.选择所有元素:

语法:*{}

2.并集选择器:

选择器1,选择器2{}

3.子选择器:筛选选择器1元素下的选择器2元素

语法:选择器1 选择器2{}

4.父选择器:筛选选择器2的父选择器1

语法:选择器1 > 选择器2{}

5.属性选择器:选择元素名称,属性名=属性值的元素

语法:元素名称【属性名=“属性值”】{}

6.伪类选择器:选择一些元素具有的状态

语法:元素 : 状态{}

属性:

1.字体、文本:

例:font—size:字体大小

color:文本颜色

text-align:对齐方式

line—height:行高

2.背景

background:

3.边框:

border:设置边框,符合属性

4.尺寸

width:宽度

height:高度

5.盒子模型:控制布局

marign:外边距

padding:内边距

(默认情况下,内边距会影响整个盒子的大小 解决:box—sizing:border—box)

float:浮动

posted @ 2021-03-17 19:56  素色学习  阅读(58)  评论(0编辑  收藏  举报