CSS

最新推荐文章于 2021-06-04 09:36:31 发布

是乔乔

最新推荐文章于 2021-06-04 09:36:31 发布

阅读量573

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/caoyujiao520/article/details/53967373

版权

19 篇文章 0 订阅

订阅专栏

一、概念

CSS(Cascading Style Sheets)：CSS样式后层叠样式表，层叠：使用不同的添加方式给同一个HTML标签添加样式，所有样式共同作用于该标签；样式：给HTML标签添加需要显示的效果。

主要用于设置HTML页面中的文本内容、图片外形以及版面的布局等外观显示样式。

作用：CSS使页面更美观；CSS+Div使布局更灵活。

规则：样式选择器严格区分大小写，但属性和属性值不区分

多个属性用英文分号隔开

若属性值由多个单词组成，用英文引号括住

样式选择器如下：

<font style="color:red;size:14;"></font>

1.行内样式

<body>
	<!--行内样式-->
	<font style="color:red">浅笑安然</font><br />
</body>

2.内部样式

<head>
	<meta charset="UTF-8">
	<title></title>
	<!--内部样式-->
	<style type="text/css">
		font{
			color: red;
		}
	</style>
</head>

3.外部样式

引用外部样式：

<head>
        <!--外部样式-->
	<link rel="stylesheet" type="text/css" href="../css/outer.css"/>
</head>

CSS文件设置：

/*font样式设置*/
font{
	color:green;
}

优先级：行内样式优先级最高，内部样式和外部样式就近原则

1.元素选择器

<font >浅笑安然</font>

/*元素选择器*/
font{
	color: red;
}

2.ID选择器：#id名{}

<font id="flower">心若浮沉</font>

/*ID选择器*/
#flower{
	color: blue;
}

3.类选择器：.class类名{}

<font class="happy">清风自来</font>

/*类选择器*/
.happy{
	color:gold;
}

4.属性选择器：标签名[属性='属性值']

文本：<input type="text" name="texts"/>

/*属性选择器*/
input[type=text]{
	background-color: brown;
}

5.包含选择器：父代标签子代标签

<div class="day">
	<font>
		今天天气好晴朗
	</font>
</div>

/*包含选择器*/
.day font{
	color:orangered;
}

1.border width heigh

2.display：block块级属性 inline行级属性 none隐藏属性 inline-block：在行里的块级元素，有宽度
块级元素div ；行级元素span

3.字体：color font-size background-color

4.float：浮动 clear：清楚浮动

margin：外边距，盒子与盒子，顺时针设置，若没有设置则按其对称来

border：边框线

padding：内边距，盒子与内容

盒子模型就是我们常用的盒子，现实生活中它既有自己的边框厚度，有与里面物体的间隔，也有盒子本身与外界的距离。

小结：

CSS层叠样式就是多种样式叠加到一起，共同作用于该标签，无论是选择器的使用，还是属性设置以及盒子模型的运用，根本都是为了改变HTML页面的样式，多种力量作用产生美观页面的效果。

关注

专栏目录