CSS基础引入方式语法规则选择器 css属性 font-属性文本属性（text-）！！！

最新推荐文章于 2023-06-07 22:30:35 发布

perfect_xiaoxian

最新推荐文章于 2023-06-07 22:30:35 发布

阅读量393

点赞数

文章标签： css基础 css引入方式 css语法规则选择器 font-属性和文本属性（text-）

本文链接：https://blog.csdn.net/baobao__/article/details/97976051

版权

引入样式选择器 ...

- CSS

CSS

1. 英文全称：cascading style sheets 层叠样式表(级联样式表)；

样式是才算是的基本单元，它可以实现页面内容和样式的彻底分离（结构和表现分离）提高工作效率，美化页面的外观。

2. css的引入方式——内联式

  1）行内样式——内联式
	```
		<div style="width:200px;height:200px;background-color:red;"></div>
	```
	缺点：作用范围小，大量使用不利于后期维护，尽量不要使用；
	适用范围：个别元素添加特殊样式。
2）内部样式——内嵌式
```
	 <head>
        <style type="text/css"></style>
     </head> 
```
使用范围：单个HTML文档设置特殊样式
3）外部样式——外链式、引入式，扩展名为.css
```
   <link rel="stylesheet" href="css文件路径" type="text/css">
```
rel属性：当前文档河北链接的文档之间的关系，stylesheet表示外部文件的类型是CSS文件；
HTML文档和css文档是相互独立的；
创建步骤：
在工程文件中，新建css文件夹，并创建一个后缀名为.css的文件；
在新建的后缀名,css的文件中输入：@charset"utf-8";设置样式文件的编码方式；
把新建的样式问价关联到网页文件中：
```
<link rel="stylesheet" href="css 文件路径" type="text/css">
```
4）导入式
在样式表中，使用@import css文件路径；
有两种方式：
@import "css/文件名称.css"
@import url( "css/文件名称.css")

3. css的语法规则

div{width:100px; height:100px;}
选择器声明语句声明语句
多个声明豫剧之间用分号隔开；
每个声明语句包括：属性名称属性值；（属性名称和属性值之间用冒号隔开）
在css里边注释/*注释的内容*/

4. 选择器-（找对象）

	基础选择器
		1.***通配符选择器**：匹配所有元素；
		2.**标签选择器**：
		结构中：<标签名></标签名>
			样式中：标签名{[声明语句]}
		3.**class选择器--类选择器**
		在标签中+class="类名"
		在css样式中：类名{[声明语句]}
		class名称有相同样式时使用，可以重复使用，
		选择器命名规范：名称尽量有含义；
		名称建议从英文字母开头，只能包含英文 数字 下划线_ 连接符-；
		**不允许**使用特殊符号（除 - _以外）；不能使用中文，纯数字，不能使用数字开头；
		建议使用驼峰命名：header- top - left: HeaderTopLeft
		4 .**id选择器**：
		结构中：<标签名 id="id名称"></标签名>
		样式中：#id名称{[声明语句]}
		***id名称在本页面中只能出现一次***；

选择器进阶

1.群组选择器-分组选择器
：在样式表中具有相同样式的元素，为减少代码量，使用群组选择器，选择器之间用逗号隔开；
2.交集选择器：
由两个或两个以上的交际选择器组成。
结构中：<div class="类名"></div>
样式中：标签名.类名{[声明语句]}
3.子代选择器 ——父子选择器：
只能选择第一级子级元素：父子选择器>子选择器{[声明语句]}
4.后代选择器：选择器之间用空格隔开
选择器1 选择器2 {[声明语句]}
在选择器1范围内的所有的选择器2都有效；
5.伪类选择器：
用来添加选择器特殊效果，语法：选择器:伪类选择器{[声明语句]}
超链接的状态（点击过程文本颜色变化）：
a:link{链接的默认样式}
a:visited{链接访问后的样式}
a:hover{鼠标悬停到链接上的样式}
a:active{鼠标按下时的样式}
四个伪类的状态都生效：L-V-H-A

css属性
width:元素的宽度，单位像素（px）；
height:元素的高度单位像素（px）；
background-color （背景颜色）:元素的背景颜色属性值：颜色结点 red；
color（文本颜色） 属性值:颜色节点：英文名称-red blue green yellow gray black white 等等；
十六进制值：
色值之前加‘#’ 色值的取值范围 0-9 a-f
rgb颜色模式：r-red(红色） g-(绿色) b-blue(蓝色) 取值范围 0-255 ；
透明度设置： transparent 透明 rgba(r, g,b,a) a-alpha（范围0~1，0完全透明 1完全不透明，0~1之间为半透明数值为小数）
**font-size:**文字的尺寸，浏览器默认字号为16px；
font-family：字体，字族：
如果字体中包含空格名称加引号，
font-family可以把多个肢体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则尝试后面的备用字体，多个字体之间用逗号隔开；
中因为混排的文字，英文字体要放在中文字体的前面， font-family：Arial , “微软雅黑”;
font-style 字体样式：
**font-style:normal；**正常显示；
**font-style:italic;**斜体字；
**font-style:oblique;**斜体字类似斜体，让没有斜体属性的文字倾斜；
font-weight：
font-style:normal: 正常显示（相当于400）
font-weight:bold; 加粗（相当于700）
font-weight:900； 文本加粗到900；
注：范围100-900之间，共有9级加粗度，100-400之间都是normal；
**line-height(行高)?*文字设置行高后，在行高范围内垂直居中（行高撑不起盒高）
font属性：
font:font-style font-weight font-size/line-height font-family;
注意：必须同时焗油膏font-size 和 font-family值时有效；
文本属性（text-）：
text-align:left;默认值水平居左显示；
text-align:center; 水平居中（文本和图片同时居中）；
text-align:right;水平居右；
text-decoration : 文本装饰线混日本你的颜色相同；
text-decoration:underline;下划线；
text-decoration:overline;上划线；
tezt-decoration:line-through；删除线；
text-decoration:none;去掉文本装饰线；
英文字母大小写转换：
text-transform:uppercase；转换成全大写；
text-trandform:lowercase;转换成全小写；
text-trandform:capitalize；首字母大写；
text-indent 文本的首行缩进，单位px em 百分比；
text-indent:5px；向右缩进5px；
text-indent:-5px；向左缩进5px；
text-intent:10%；与父元素的宽度有关，缩进父元素宽度的10%；
text-indent:1em；字符（中文汉字）宽度的倍数；

6. css长度单位

**px：** 相对于屏幕分辨率而言（绝对单位），值时固定的，计算机较为容易；
**em:** 相对长度单位，此昂党羽父元素的字号大小而言的；
未经调整的浏览器 1em=16px；（默认状态下），不固定，会继承父级元素的字体大小；
**%：** 相对长度单位，大小，相当于父类而言（父类宽高）；
**rem:** css新增的相对长度的单位 相对于根元素的字号大小而言，未经调整的浏览器默认状态下 1rem = 16px；