CSS学习

weixin_52089751

已于 2022-07-09 22:10:43 修改

阅读量169

点赞数

文章标签： css 学习前端

于 2022-06-27 23:28:57 首次发布

本文链接：https://blog.csdn.net/weixin_52089751/article/details/125456451

版权

一、概述

1.CSS是什么

Cascading Style Sheet 层叠样式表、级联样式表

2.为什么用CSS

为HTML元素定义样式

让各个元素都使用统一的样式声明，提高程序的重用性和可维护性
实现内容与样式相分离

3.HTML和CSS的关系

一个完整的页面=HTML标签+CSS样式

HTML 显示页面内容
CSS 构建页面样式

4.HTML属性和CSS样式的使用原则

W3C 建议尽量使用CSS样式代替 HTML属性
代替不了的用HTML属性如 rowspan colspan

5.CSS样式使用方式

行内式	将属性定义在HTML元素中	`<div style="color:red;"></div>`	只能控制某个元素的效果
嵌入式	样式规则放入`<style </style>` 中，然后一起放入`<head>`中	`<style type="text/css">div:{color:red;}</style>`	只对当前页面有效
链接式	样式规则独立存在于.CSS文件，在head中引用	`<link rel="stylesheet" type="text/css" href="css文件地址" >`	1.可以在整个网站中做通用样式；2.css文件只在第一次加载时引入，后续切换页面只需要加载html页面即可
导入式	样式规则独立存在于.CSS文件，在css中引用，写在样式表最上边一行	`<style> @import url(css文件地址)</style>`	引入的文件会等页面全部下载完毕后再被加载

6.CSS样式特性

继承性
层叠性
优先级：浏览器默认设置–嵌入、链接、导入式–内联式–!important

二、选择器

通配符选择器 *{}	`*{margin:0;padding:0;}`	选择页面中所有的元素
标签选择器 p{}	`p{boder:1px;}`	选择页面中所有的这种标签
id选择器 #id{}	`#nav{color:red;}`	选择标签的id属性值为nav的所有元素，一个页面中id名唯一
类选择器.class{}	`.nav{color:red;}`	选择标签的class属性值为nav的所有元素，一个页面中class名不唯一
包含选择器 div p{}	`div p{color:red;}`	标签与标签之间空格分开，选择div里的所有p标签
子选择器div>p{}	`div>p{color:red;}`	选择父亲div下边的儿子p，不会选择到孙子等p
兄弟选择器div~p{}	`div~p{color:red;}`	选择div后的所有兄弟p
相邻选择器div+p{}	`div+p{color:red;}`
组合选择器	`div,p{color:red}`	选择div和p标签
属性选择器	`a[target]{color:red;}`	选择带有属性target的标签a
伪类选择器	`a:link` 选择所有未被访问过的超链接 `a:visit`选择被访问过后的超链接 `a:hover`选择悬停之上的链接 `a:active` 选择活动的链接 `a:focus`选择获得焦点的链接	定义元素的特殊状态

!important–行内样式 1000–id 0100–class 0010–标签0001–通配符*–自带样式–继承

三、盒子模型

元素实际宽度=内容宽度width+左右内边距padding+左右边框border+左右外边距margin

1.内边距padding

什么是内边距：content和border之间的距离。内边距会将边框撑大 可以设置背景颜色和图片
取值：px :具体的值;%：相对于父盒子；没有负值
padding：value；上下左右
padding： v1，v2；上下，左右
padding：v1, v2, v3；上，左右，下
padding：v1, v2, v3, v4 上右下左

2.外边距margin

什么是外边距：边框周围的透明区域，当前元素和其它元素之间的距离。默认不被其他元素占据的。
px :具体的值;
%：相对于父盒子；
auto:只对左右边距有效，设置元素剧中对齐
负值：向相反的方向移动元素
margin：value；上下左右
margin： v1，v2；上下，左右
margin：v1, v2, v3；上，左右，下
margin：v1, v2, v3, v4 上右下左
默认的外边距：h1~h6;p;ul;body;dl;dd默认有外边距
（垂直）外边距合并
外边距溢出

3.边框border

边框定义	border:width style color	style:solid、dotted点线 dashed长短线 color可以为transparent透明色
单向	border-top:width style color	定义某个方向
单属性	border-color、style、width
单向单属性	border-top-color:
边框倒角	border-radius:1个值/4个值	border-top-left-radius:左上角
边框阴影	box-shadow:h-shadow v-shadow spfread color;0px 0px 1px,red	水平偏移量正值往右；垂直偏移量正值往下；阴影尺寸可选属性；阴影颜色可选属性
轮廓	outline:width style color	常用模式 outline:0px;

四、文本

1.字体属性

font:font-style font-variant font-weight font-size font-family;
常用设置：font:12px "微软雅黑"

指定字体	font-family:“微软雅黑” ;
字体大小	font-size:1px;	单位为px或者pt
字体加粗	font-weight: bold/normal/无单位数字400-900;	相当于html中的`<b>`
字体变斜	font-style:italic/normal
大写小写字母	font-variant:small-caps/normal

2.文本属性

文本颜色	color:red;
水平排列方式	text-align:left/center/right;	能过够控制当前元素内所有文本、行内元素、行内块的水平对齐方式
行高	line-light:4px;	如果行高大于文字高度，则文字垂直居中对齐
首行文本缩进	text-indent:2px;
线条修饰	text-decoration:underline/overline/none
文本阴影	text-shadow:h-shadow v-shadow blur color;0px 0px 1px,red	blur:模糊距离

五、背景

默认情况下，背景颜色和图像从边框位置就开始填充
background:url(image/user,jpg) no-repeat -120px -240px;

背景颜色	`background-color:red;`	颜色值 transparent
背景图片	`background-image:url("a.jpg");`	括号中可以双引号、单引号，也可无引号
图片大小	`background-size:10px 10px;`	v1 v2 宽高 v1% v2% 宽高占比 cover 覆盖扩大背景图，覆盖元素所有所占区域可能使图片不完整显示 contain 包含扩大背景图直到图片触碰到某一个边缘位置图片完整显示不一定覆盖元素
图片定位	`background-position:`	x y 水平偏移(正右) 垂直偏移(正下) x% y% 0% 0%左上角 100% 100% 右下角 50% 50% 居中 x:left center right y:top center bottom
图片平铺	`background-repeat:no-repeat;`	repeat no-repeat repeat-x repeat-y
图片固定	`background-attachment:`	scroll 滚动默认 fixed 不滚动

六、表格

1.常见属性

尺寸属性	width height
边框属性	border	表格、单元格都可以定义边框
内边距	padding
文本属性	font- text-
背景属性	background-
垂直对齐方式	vertical-align:top/middle/bottom	针对单元格，控制单元格内容的对齐方式

2.特有属性

边框合并	border-collapse	separate 分离默认 collapse 合并
边框距离	border-spacing: v /v1 v2	加在table上

3. 显示规则

表格如何被加载 table-layout:

auto自动表格布局	fixed 固定表格布局
列宽由表格内容决定	列宽取决于设置的宽高
加载时慢	加速显示表格，加载表格时不用计算
适用于不确定每列大小	不够灵活，不能体现出表格特点

七、列表

list-style:type url() position; list-style:none;

标志类型 list-style-type	none 无标志 disc 实心圆 cricle空心圆 square实心方块 decimal 数字 lower-roman 小写罗马
图片标志 list-style-image	url()
标志位置 list-style-position	outside 默认值文本外边 inside 文本范围之内

八、浮动/定位

1.浮动

文档流/标准流：

块级元素从上到下排列，每个元素独占一行。
行内元素从左到右排列，可以用左右margin调整左右位置，不能调整上下边距。
块级元素无法在一行内显示多个，布局不好做。浮动出现了！！！

浮动特点
1. 浮动的目的：让块级元素可以在一行内显示。
2. 脱离文档流，不再占据位置，可能会压住其他元素。
3. 以父元素为参考，浮动边缘不会超出父元素边缘。装不下后自动换行。
4. 元素会停在父元素的边缘(父元素有padding时不能跨越)或者已经浮动元素的左边或右边。
5. 元素都浮动后，不会相互重叠。
6. 只能左右浮动。
7. 块级元素浮动后，宽度变成自适应。
8. 行内元素浮动后，宽度变成自适应，变成块级元素。
浮动问题
1. 浮动不占据位置，则其父元素的高度不包含浮动元素的高度。
2. 父元素中所有元素都浮动，则父元素高度为0。父元素的兄弟元素会覆盖它。
3. 图片和文字不会被覆盖。
清除浮动
1. 手动设置元素高度。自适应时无法使用。
2. 在父元素内最后位置加空的块级元素。<div style="clear:both;"></div> 但是引入很多无意义的空标签，现在不用。
3. 在父元素中加入overflow:hidden,他会撑起当前元素的高度。会隐藏超出范围的元素。

2.定位

浮动	相对定位relative	绝对定位absolute	固定定位fixed	静态定位static
脱离文档	不脱离文档流保留原本位置	脱离文档流	脱离文档流	默认
相对父元素	相对自己原本的位置偏移	相对最近的已定位的祖先元素	相对浏览器
会	不会堆叠	会对其它元素堆叠	会
使块元素可以在一行	本身位置微调配合absolute实现弹出菜单实现堆叠顺序调整	实现元素堆叠效果弹出菜单

堆叠顺序

按照元素出现顺序，后来者居上（同级别）
子元素永远来父元素上边，不可变
可以用z-index:1/2/3来更改堆叠顺序，数字大靠上

九、显示

通过display属性修改元素框的默认显示方式
常用方式:

隐藏元素display:none; 如果需要显示再按自己方式显示出来。
修改行内元素宽高 float:left/right; display:block/inline-block;

none	block	inline	inline-block
脱离文档流，隐藏元素，不占据空间	让元素表现的像块级元素	让元素表现的像行内元素	一行显示多个元素，且可以修改宽高
	行内元素变为块级元素将块级元素隐藏后，再显示出来	将行内元素隐藏后，再显示出来