CSS基础（前端）

css定义

css(Cascading StyleSheet)层叠样式表，它是用来美化页面的一种脚本语言。

脚本语言不是编程语言

css作用

美化界面
,比如:设置标签文字大小、颜色、字体加粗等样式。
控制页面布局,比如：设置浮动、定位等样式。

div+css架构

css基本语法

CSS是由两个主要的部分构成：选择器和一条或多条样式规则，
注意：样式规则需要放到大括号里面。
语法↓

选择器{
样式规则
}
样式规则：
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；
...

div选择器(css代码示例↓)

div{
width:100px;
height:100px;
background:gold;
}

在HTML中引用CSS的三种方式

• 行嵌式
• 内嵌式（建议学习中使用）
• 外链式（放文件中，工作中使用）

css选择器

下面都用内嵌式的css引用方式

选择针对那一部分进行美化
如果只用div，那就是针对所有div标签进行美化

标签选择器:用标签名来选

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

是这个标签都会被影响

...
<style type="text/css">
	p {
		background-color:pink;
	}
</style>
...
<p>内容</p>

id选择器:用#标签名来选

针对某个元素

根据id选择标签，以#开头，元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

（id可以自己随便写，但是要唯一）

...
<style type="text/css">
	#content {
		background-color:pink;
	}
</style>
...
<p id="content">内容</p>

<div id="content">内容</div>

类选择器:用.类名来选

具有一类功能的一组标签

可以重复可有多个

（定义一个类，然后选择这个类来自定义）

...
<style type="text/css">
	.content {
		background-color:pink;
	}
</style>
...
<div class="content">内容</div>

层级选择器

根据层级关系选择后代标签，以选择器1选择器2开头，主要应用在标签嵌套的结构中，减少命名。

<style>
	div p {
		color: red;
	}
</style>

<div>
	<p>内嵌内容，这里会被设置成红色</p>
<div>
<p>这里不会被设置成红色</p>

↑ div标签下的所有p标签

群组选择器（组选择器）

根据组合的选择器选择不同的标签，以,分割开，如果有公共的样式设置，可以使用组选择器。

<style type="text/css">
	.box1, .box2 {
		background-color:pink;
	{
</style>
...
<div class="box1">这是第一个元素</div>
<div class="box2">这是第二个元素</div>
<div class="box3">这是第三个元素</div>

div, p{
这种是对所有div和p标签都应用
}

伪类选择器

用于向选择器添加特殊的效果，以：分割开，当用户和网站交互的时候改变显示效果可以使用伪类选择器

:hover当鼠标移过去的时候就变色

<style type="text/css">
	div#box1 {
		background-color:pink;
		width:400px;
		height:200px;
	}
	/* 鼠标hover悬浮效果 */
	#box:hover {
		color:white;
		background-color: green;
	}
</style>
...
<div id="box1">这是一个元素</div>

div#box1这俩要挨在一起，如果不挨在一起(div #box1)系统会认为在div标签下找box1标签

css属性

理解能看懂就行

• 布局常用样式属性：宽高
• 文本常用样式属性：文字颜色大小居中

布局属性

布局常用样式属性

• width 设置元素（标签）的宽度：如：width:100px;
• height 设置元素（标签）的高度
• background 设置元素背景色或者背景图片
  背景色：background:gold;
  背景图片：background: url(images/logo.png);
• border 设置元素四周的边框，如：border:1px solid black;
  也可以拆成四个边的写法：
  border-top:10px solid red;
border-bottom:10px solid pink;

文本属性

文本常用样式属性

• color 设置文字的颜色，如：color:red;
• font-size 设置文字的大小，如：font-size:12px;
• font-family 设置字体，如：font-family:'微软雅黑';，为了避免中文字不兼容，一般写成font-family:'Microsoft Yahei';
• font-weight 设置文字是否加粗，如：
  • 设置加粗：font-weight:bold;
  • 不设置加粗：font-weight:normal;
• line-height 设置文字的行高，如：line-height:24px;，表示文字高度加上文字上下的间距是24px（每行占有的高度是24px）
• text-decoration 设置文字的下划线，如：text-decotation:none
• text-align 设置文字水平对齐方式，如：text-align:center(left/center/right)
• text-indent 设置文字首行缩进， 如：text-indent:24px