前端CSS样式基础

文丁响

已于 2022-10-08 10:38:25 修改

阅读量206

点赞数

文章标签：前端 css html

于 2022-09-01 20:30:53 首次发布

本文链接：https://blog.csdn.net/wdx1641670284/article/details/126650282

版权

1.CSS是什么？

CSS（Cascading Style Sheet）层叠样式表

2.CSS引入方式

1）行内样式

把样式写在考试标签的属性style里

2）内嵌式

把样式写到<style></style>标签内部

3）外链式

<link href="css文件" rel=" stylesheet">

4）导入式

在css里面导入

@import url(css文件路径) 或
@import “css文件路径”

优先级：

行内样式优先级最高，内嵌式与外链式谁最后引入，谁的优先级最高。

3.CSS选择器

1）id选择器

#id值{ }
权重100

2）类选择器

.类名{ }
权重10

3）标签选择器

标签名{ }
权重1

4）包含选择器

选择器E 选择器F{ }
权重 权重相加

5）群组选择器

选择器E，选择器F{ }

6）伪类选择器

:link{ } 未访问状态
:visited{ } 访问后的状态
:hover{ }悬停状态
:active{ } 激活状态

4.CSS字体样式

1）字体大小

font-size
字体大小

2）字体系列

font-family
字体系列
多个字体间用逗号隔开，英文字体中间有空格的，用引号引起来

3）字体粗细

font-weight
字体粗细
	normal  默认 正常
	bold    粗体
	bolder  加粗
    100-900 100-300 细体字
			400-500 正常体
			600-900 粗体

4）字体风格

font-style
字体风格
normal  默认 正常
italic  斜体
oblique 倾斜

5）行高

line-height
行高
	数值+单位px
	数值  表示倍数

简写font：

font：font-style值 font-weight值 font-size值/line-height值 font-family；

注意:顺序不能颠倒可少值但最少俩个

5.文本相关样式

1）文本水平方式方向对齐方式：text-align

text-align
文本水平方向对齐方式
left  居左对齐(默认)
center 居中对齐
right 居右对齐
justify 两端对齐

2）文本首行缩进：text-indent

text-indent
文本首行缩进
常用em作为单位

3）文本修饰：text-decoration

text-decoration
文本修饰
none 默认 无修饰
underline   下划线
line-through 中划线
overline   上划线

4）大小写转换：text-transform

text-decoration
文本修饰
none 默认 无修饰
underline   下划线
line-through 中划线
overline   上划线（用的少）

5）字符间距离：letter-spacing

6）单词间距离：word-spacing

7）单行省略号：

单行省略号
	white-space：nowrap
		不换行
	overflow：hidden
		内容溢出隐藏
	text-overflow：ellipsis
		文本溢出显示省略标记

6.overflow 内容溢出处理

overflow 内容溢出处理
	visible
		默认 溢出可见
	hidden
		隐藏溢出部分
	scroll
		显示滚动条
	auto
		浏览器自动处理

7.垂直对齐vertical-align：

1）作用：
1.使行内元素盒模型与其容器垂直对齐
2.垂直对齐表格单元内容
2）注意：
vertical-align只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。

8.盒子模型

分类：

1）标准盒模型 W3C：box-sizing：content-box

2）怪异盒模型 IE：box-sizing：border-box

3）区别：标准盒模型 width，height是内容区域的大小

怪异盒模型 width，height是盒子大小

1）盒子组成：

1.内容content + 内边距padding + 边框border + 外边距margin
2.盒子大小：content + padding + border 值

2）盒模型分类：

1.标准盒 w3c：width height的值表示盒子内容区域的大小；

2.怪异盒模型 IE：width height的表示盒子的大小。

3）内边距padding：

padding：10px；盒四周的内边距为10px

padding：10px 20px；上下左右的内边距

padding：10px 20px 30px；上左右下的内边距

padding：10px 20px 30px 40px；上右下左的内边距

4）外边距margin：

margin：10px；盒四周的外边距为10px

margin：10px 20px；上下左右的外边距

margin：10px 20px 30px；上左右下的外边距

margin：10px 20px 30px 40px；上右下左的外边距

5）边框border：

border-width 边框宽度

border-style 边框风格： solid 实线 dashed 虚线 dotted 点状线 double 双实线

border-color 边框颜色

简写形式：border : border-width值 border-style值 border-color值;
四周边框

                border-top 上边框
                border-bottom 下边框
                border-left 左边框
                border-right 右边框

实现三角形：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 0px;
				border: 100px solid red;
				border-top-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

效果图：

文丁响

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端CSS样式基础

前端css基础（部分）持续更新！！！！！！！！！
复制链接

扫一扫