CSS（1）

最新推荐文章于 2024-10-11 14:07:15 发布

m0_74299783

最新推荐文章于 2024-10-11 14:07:15 发布

阅读量30

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/m0_74299783/article/details/129765048

版权

CSS用于美化网页，其语法包括选择器和声明。基础选择器如标签选择器、类选择器和ID选择器，用于定位页面元素。字体属性如font-family和font-size影响文字显示，而文本属性涉及颜色、对齐和装饰。CSS可通过行内、内部和外部样式表三种方式引入。

摘要由CSDN通过智能技术生成

CSS（层叠样式表）

作用：美化页面

CSS语法规范

1 .规则：（两部分组成） 选择器以及一条或多条声明
2.一般写到<head></head>中间
<head>
	<style>
	p {color: red;
	font-size:12px;
	}(给p标签里的文字弄成红色,修改文字为12像素)
	</style>
</head>
3.font-size后的数字要加px
4.键值对：color和font-size就算一组键值对

代码风格

1.样式格式书写
（1）紧凑格式
  	h2	{color:red;font-size:20px;}
（2)展开格式(推荐)
  	h2{
  	color:pink;
  	font-size:12px;
  	}
2.字母用小写
3.空格规范
（1）属性值前面，冒号后面，保留一个空格
（2）选择器和花括号之间有一个空格

选择器分类（选择标签）

1.基础选择器（由单个选择器组成）
	（1）标签选择器（标签名作为选择器，选择页面的某一类标签）
	（2） 类选择器（可以单独选一个或者某几个标签）
		<i>.类名（别使用数字和汉字）{
		   属性1:属性值1；
		   }
        <p class='类名'></p>（p标签里的字变为红色）
        <p></p>
        **类标签口诀：样式点定义 结构类调用**
        <ii> background-color： red；（做一个纯色的盒子可以用到）
        <iii>多类名（把多个类名写进一个class里，中间写空格） 
     （3）id选择器
	    <i>  <style>
     #名字{
     color ： pink；
     }
     </style>
     引用:<p id="名字“></p>
        <ii>   ** 样式#定义，结构id调用，只能调用一次，别人不能调用**
     (4)通配符选择器
     <style>
     *{
     color: red;
     }
     </style>(页面中所有的标签都是红色的)

在这里插入图片描述

CSS字体属性

1.font-family：字体
注意：（1）各种字体之间必须使用英文状态下的逗号隔开
	  （2）一般情况下，如果有空格隔开的多个单词组成的字体，加引号
2.font-size：16px；（可以给body指定整个页面文字的大小，但标题得单独指定）
3.font-weight：效果（normal变细 bold加粗 400=normal/700=bold（也是加粗效果）
4.font-style：normal（正常）italic（倾斜）
5.font复合属性
font： font-style font-weight font-size font-family；
font：italic  700  16px，’Microsoft yahei‘；
font-size和font-family必须有，剩下的可以省略

CSS文本属性

1.文本的颜色(color)
 (1)预定义的颜色值：red green blue
（2）十六进制：#FF0000；#FF6600
（3）GRB（255，0，0）红色
2.对齐文本（text-align）
text-align：right/left（默认值）/center
3.装饰文本（text-decoration）
给文本添加下划线，删除线，文本缩进，行间距
4.文本缩进（text-indent）
text-indent：20px/2em（根据文字大小，em是一个文字大小距离）
5.行间距（line-height）
line-height：26px；

装饰文本

CSS的引入方式

1.行内样式表 
<div style="color: red; font-size:12px;">引用的字</div>
2.内部样式表（<style>写在HTML页面里）
3.外部样式表
分两步：（1）.建立.css文件，css文件里不用写标签
	   （2）在HTML页面中，使用<link>标签引入这个文件
	   <link rel="" href="css文件路径">