CSS3基本语法

news2024/11/16 6:48:44

文章目录

- - 一、CSS引入方式
  - 二、选择器
  - - 1、标签选择器
    - 2、类选择器
    - 3、id选择器
    - 4、通配符选择器
  - 三、字体操作
  - - 1、字体大小
    - 2、字体粗细
    - 3、字体样式（是否倾斜）
    - 4、字体修改
    - - 常见字体系列
    - 修改字体系列语法
  - 四、文本操作
  - - 1、文本缩进
    - 2、文本水平对齐方式
    - 3、文本修饰
    - 4、文本水平居中总结**text-align： center;**
    - 5、文本水平居中方法margin
  - 五、行高
  - - - font连写
  - 六、颜色常见取值
  - 七、选择器进阶
  - - 1、后代选择器
    - 2、子代选择器
    - 3、并集选择器
    - 4、交集选择器
  - 八、简写语法（emmet语法）
  - 九、hover伪类选择器
  - 十、背景相关
  - - 背景属性的连写
  - 十一、元素显示模式
  - - 1、块级元素
    - 2、行内块元素
    - 3、元素显示模式转化
  - 拓展、HTML嵌套规范

一、CSS引入方式

内嵌式
$s t y l e$ 放在 $h e a d$ 中
外联式
类似分文件编写，需要使用 $l ink$ 语法引用 $. css$ 文件

<link rel="stylesheet" href="xxx.css">

行内式
不推荐

二、选择器

1、标签选择器

<style>
	p { //p为段标签
	}
</style>

2、类选择器

<style>
	.box {  //定义的类名
	}
</style>
<body>
	<div class="box"></div>
</body>

3、id选择器

一般与js搭配使用

<style>
	.one {  //定义的id
	}
</style>
<body>
	<div id="one"></div>
</body>

4、通配符选择器

找到所有的标签

<style>
	* {  
	}
</style>
<body>
	<div></div>
	<p></p>
</body>

三、字体操作

1、字体大小

<style>
	.box {
		font-size: 30px;  //px是像素
	}
</style>

2、字体粗细

常用：

普通 normal
加粗 bold

<style>
	font-weight: bold;
</style>

3、字体样式（是否倾斜）

普通 normal
倾斜 italic

<style>
	font-style: italic;
</style>

4、字体修改

常见字体系列

sans-serif 无衬线字体
serif 衬线字体
monospace 等宽字体

修改字体系列语法

<style>
	font-family: 宋体，隶书，sans-serif
</style>

渲染规则：
（1）从左往右按顺序查找，找到第一个电脑有的字体使用
（2）如果都不支持，则按最后的字体系列默认值使用
注意
如果字体名称中存在多个单词，推荐使用引号包裹。

四、文本操作

1、文本缩进

<style>
	.box {
		text-indent: 5px;  //缩进5像素
		text-indent: 2em;	//缩进两字符
	}
</style>

em指font-size大小

2、文本水平对齐方式

<style>
	.box {
		text-align: center;
	}
</style>

注意：
若需要给文本水平居中，text-align需要给文本的父元素设置。

3、文本修饰

<style>
	.box {
		text-decoration: underline;
	}
</style>

underline 下划线
line-through 删除线
overline 上划线
none 无装饰线
注意：
开发中会使用text-decoration: none;清除a标签默认的下划线

4、文本水平居中总结text-align： center;

能让哪些元素水平居中：
（1）文本
（2）span标签、a标签
（3）input标签、img标签
注意：
如果需要让以上元素水平居中，需要给以上元素的父元素设置

5、文本水平居中方法margin

是将div、p、h（大盒子）水平居中的方法

margin： 0 auto;

注意：
（1）想让谁水平居中，就给谁里面设置
（2）margin：0 auto一般针对于有固定宽度的盒子，大盒子没有设置固定宽度，此时会默认占满父元素的宽度。

五、行高

控制行间距

<style>
	.box {
		line-height: 5px; 
		line-height: 2;	2倍字符间距
	}
</style>

注意
（1）使用line-height：文字父元素高度，可以使得单行文本垂直居中。
（2）line-height：1；可以消除上下间距

font连写

<style>
	.box{
		font:style weight size/line-height family;
	}
</style>

六、颜色常见取值

关键词
rbg表示法：
红绿蓝三原色，每一项取值范围0~255
rbga表示法：
红绿蓝三原色+a表示透明度，取值范围0~1
十六进制表示法

七、选择器进阶

1、后代选择器

语法
选择器1 选择器2{CSS}
结果：
在选择器1找到的标签的儿子、孙子……中，找到所有满足选择器2的标签

2、子代选择器

语法
选择器1>选择器2{CSS}
结果
在选择器1所找到的标签的子代中，找到满足选择器2的标签

3、并集选择器

语法
选择器1，选择器2{CSS}
结果
找到同时满足任意一个选择器的元素

4、交集选择器

语法
选择器1选择器2{CSS}
结果
找到同时满足两个选择器的元素

八、简写语法（emmet语法）

在这里插入图片描述

九、hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式
语法
选择器： hover{CSS}

十、背景相关

background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺
（1）repeat x，y方向都平铺
（2）no-repeat 不平铺
（3）repeat-x 沿着水平方向平铺
（4）repeat-y 沿着垂直方向平铺
background-position 背景位置
可使用方位名词或者数字+px