CSS层叠样式表、CSS的选择器、CSS的样式规则

最新推荐文章于 2022-12-08 22:58:21 发布

陛下，再来一杯娃哈哈

最新推荐文章于 2022-12-08 22:58:21 发布

阅读量152

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_46420078/article/details/120661369

版权

一、CSS层叠样式表

1.基本语法

<STYLE  type="text/css">

 P  {color:red; font-size:30px; font-family:隶书;}

……

</STYLE>

2.使用方法

(1)行内嵌入式：给标签添加style属性,用来设置样式（只对当前嵌入的标签有效）

<p style="color: cyan; font-size: 45px;">西安邮电大学</p>

(2)页面嵌入式：在页面中使用<style></style>定义不同的样式规则

<style>
    body{/* 表示body中的所有内容都居中 */
		text-align: center;  
		}
				
	p{
		color: red; /*color表示文字的颜色*/
		font-size: 45px; /*font-size表示字号*/
	 }
</style>
<body>
	<p>西安邮电大学</p>
	<p>湖南湘潭大学</p>
</body>

(3)导入css文件的方式：推荐使用

第一步：创建扩展名为.css的样式文件

第二步：在页面中通过<link>标签将外部的css文件链接起来

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/table.css">
</head>

二、CSS的选择器

CSS的选择器：在CSS中定位页面中的标签(控件)

(1)标签名选择器

标签名{
样式规则(属性): 值;
}

body{  /* 表示body中的所有内容都居中 */
    text-align: center;  
}

p{
    color: blue; /*color表示文字的颜色*/
    font-size: 45px; /*font-size表示字号*/
}

(2)类选择器

在页面中给标签添加class属性,标签的class属性值可以重复

.类名(标签的class属性值){
样式规则(属性): 值;
}

.p1 {
    color: rgba(0, 0, 0 , 0.5)
}
.p2 {
    color: rgb(100, 50, 255);
}

(3)id选择器

在页面中给标签添加id属性,标签的id属性值不能重复

#id{
样式规则(属性): 值;
}

#ht{
    color: rgba(141, 49, 49, 0.5);
    font-style: italic;
    font-size: 35px;
    font-family: '隶书';
    font-weight: 900;
}

(4)通配选择符

*，代表所有元素

*{
样式规则(属性): 值;
}

三、CSS的样式规则

1.字体规则

文本属性	说明
font-weight	字体粗细
line-height	文字行高
word-spacing	单词间距
letter-spacing	字母间距
text-decoration	文本样式

<style>
p
{
  color:#888888;
  font-size:14px;
  word-spacing:10px;
  letter-spacing:2px;
  font-weight:700;
  line-height:1.5;
  width:500px;
}
</style>
</head>
<body>
<p>
Abram went north out of Egypt to the southern part of Canaan with his wife and everything he owned, and Lot went with him. 
	</p>

背景属性	说明
background-color	设置背景颜色
background-image	设置背景图像
background-repeat	设置一个指定的图像如何被重复可取值repeat-x、 repeat、 no-repeat、repeat-y

2.列表样式

属性	说明
list-style-position	设置项目符号和文本的位置
outside	默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐
inside	列表项目符号放置在文本以内，且环绕文本根据符号对齐
list-style-image	指定项目符号的图像
list-style-type	指定项目符号的类型
list-style	指定列表样式

body{
    text-align: center;
}
li{
    /* list-style-position: inside;
    list-style-type:lower-roman; */
    list-style: url('../images/f4.png') inside none;
}

3.表格样式

属性	CSS名称	说明
边界属性	margin-top	设置对象的上边距
	margin-right	设置对象的右边距
	margin-bottom	设置对象的下边距
	margin-left	设置对象的左边距
边框属性	border-spacing	指定单元格之间的距离,不能是负值
	border-collapse	指定单元格的边框是否合并,取值有两个
	separate	单元格边框独立,默认值
	collapse	相邻单元格的边框合并
	border-color	边框颜色
	border-width	border-width
	border-style	边框线的样式
	border-radius	边框的弧度
填充属性	padding-top	设置内容与上边框之间的距离
	padding-right	设置内容与右边框之间的距离
	padding-bottom	设置内容与下边框之间的距离
	padding-left	设置内容与左边框之间的距离

body{
    text-align: center;
}
table {
    border-spacing: 25px;
    border-collapse:collapse;
    border-color: blue;
    border-width: 2px;
    border-style:dashed;
    border-radius: 15px;
}