前端基础-CSS

CSS的基本使用

CSS基本语法

一个CS5展性和属性
CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性
值。

1
2
3
4
选择器名{
	属性:属性值;
	....
}
1
2
3
div {
	background-color:red;
}

CSS的引入

1.行内样式

行内样式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在设
定某个元素的样式时比较常用。

1
<p style="color:red;font-size:50px;">这是一段文本</p>

在当前元素使用style属性的声明方式。

​ style是行内样式属性；

​ color是颜色属性；red是颜色属性值

​ font-size是字体大小属性；50px是字体大小属性值

2.嵌入式

嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在<head>标签中嵌套<style>标签
在<style>中通过选择器的方式调用指定的元素并设置相关CSS。

1
2
3
<style type="text/css">
	p {color:blue;font-size:40px;}
</style>

3.引入外联样式文件

在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

链接式：

1
2
3
<link rel="stylesheet" href="CSS\style.css">

p {color: green；font-size: 30px；}

导入式：

1
2
3
<style>
	import:url("CSS\style.css")
</style>

链接式为css3引入方式，导入式为2.1缺点是不会同时渲染完成

CSS选择器

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。
CSS选择器有很多，掌握常用的即可
基本选择器

通用选择器

选择所有 *

1
2
3
*{
	....
}
1
2
3
*{
	color:orange;
}

标签选择器

选择指定标签

1
2
3
4
5
/*
标签名称{
	....
}
*/
1
2
3
p{
	....
}

id选择器

选择指定id

1
2
3
#id{
	...
}

分组选择器

选择指定分组

1
2
3
.class{
	...
}

优先级 ： 行内 > id > 分组 > 元素 > 通用

组合选择器

CSS组合选择器说明了两个选择器直接的关系。CSS组合选择符包括各种简单选择符的组合方式。
在CSS中包含了四种组合方式：后代选取器（以空格分隔），子元素选择器（以大于号分隔），相邻兄弟选择器
（以加号分隔），普通兄弟选择器（以波浪线分隔）。

后代选择器（派生选择器）

用于选择指定标签元素下的后辈元素，以空格分隔

1
2
3
选择器1 选择器2{
	.....
}
1
2
3
.food li{
	border: lpx solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1>食物</h1>
<ul class="food">
	<li>水果
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨</li>
		</ul>
	</li>
	<li>蔬菜
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨</li>
		</ul>
	</li>
</ul>

子元素选择器

用于选择指定标签元素的所有第一代子元素，以大于号分隔

1
2
3
选择器1 选择器2{
	.....
}
1
2
3
#d > li{
	border: lpx solid red;
}

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

1
2
3
选择器1 选择器2{
	.....
}
1
2
3
#d + div{
	border: lpx solid red;
}

结构伪类选择器

nth-child()

nth-of-type()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a:link{                     /*link表示未访问过的超链接*/
}
a:visited{                  /*visited表示已访问过的超链接*/
}
input:focus{                /*focus表示当前拥有焦点的元素*/
}
div:hover{                  /*hover表示鼠标指针停留的元素*/
}
a:active{                   /*active表示被用户输入激活的元素*/
}
div:first-child{            /*first-child表示第一个元素，此句表示第一个div元素*/
}
div :first-child{           /*空格表示后代元素，此句表示div元素的第一个后代元素*/
}

属性选择器

类选择加id选择器组合用法

1
2
3
.class 标签名[id=xxx]{
    xxxx:xxxx;
}

CSS常用属性设置

背景

CSS背景属性用于定义HTML元素的背景效果

background-color

设置元素的背景颜色

1
2
3
body {
	background-color:#ff0000；
}

background-image

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体

1
2
3
body {
	background-image:url('paper.gif');
}

background-repeat 重复

设置是否及如何重复背景图像

1
2
3
4
body {
background-image:url(img/logo.jpg);
background-repeat:no-repeat;
}

repeat-x 横向平铺 repeat-y 纵向平铺

文本

color

1
2
3
4
5
6
7
8
9
10
body {
	color:blue；
}
h1{
	color:#00ff00；
}
h2{
	color:rgb(255,0,0);
}

text-align 对齐

​ 设置文本对齐方式，center（居中），left（左对齐），right（有对齐）

1
2
3
4
5
6
7
8
9
body {
	text-align:center;
}
hi {
	text-align:right;
}
h2 {
	text-align:right;
}

text-decortion 划线

1
2
3
4
5
text-decoration: overline;上划线
text-decoration: underline;下划线
text-decoration: line-through;中划线
text-decoration: overline line-through underline;同时上中下 
text-decoration: none;去除划线

text-indent 缩进

1
text-ident:4em;   em为一个文字高度

line-height 行高

阴影

1
2
3
4
5
6
7
8
9
10
文字阴影语法以及相关属性:
 
text-shadow:h-shadow v-shadow blur color;
 
参数详解:
 
h-shadow：阴影的水平距离
v-shadow: 阴影的垂直距离
    blur: 阴影的模糊半径
   color: 阴影的颜色

字体

font-family

文本字体，该属性设置文本的字体。
font-family属性应该设置几个字体名称作为一种“后备机制，如果浏览器不支持第一种字体，他将尝试下一种
字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。
注意：
1）只有当字体名中含有空格或#、$之类的符号时（如NewYork），才需要在font-family声明中加引号：

盒子模型

border、padding、margin三个属性构成了盒子模型。

border 边框

设置所有的边框属性。
1）可同时设置边框的宽度、样式、颜色

1
2
3
4
5
6
table,th,td {
	border: lpx solid black;
}
table {
	width:100%；height:50px;
}

2）使用border-width、border-style、border-color单独设置

border-radius圆角边框

padding 内边距

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性

margin 外边距

浮动

display

1
2
3
4
block	 /*变成块级元素（前后有换行）*/
inline 		/*变成行内元素（前后无换行）*/
inline-block 	/*变成行内块级元素*/
none	/*隐藏*/

Float

float的属性值有none、left、right。

1.只有横向浮动，并没有纵向浮动。

2.会将元素的display属性变更为block。

3.浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）

4.浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用
float）。

清除浮动both：清除浮动

1
<div style="clear:both“></div>

clear

1
2
3
4
clear:both;	/*清除所有浮动*/
clear:left;	/*清除左侧浮动*/
clear:right;	/*清除右侧浮动*/
clear:none;

overflow溢出

控制子元素在溢出父元素内容边框时的显示方式

overflow属性有以下值：

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

父级元素塌陷问题

  1. 增加父级元素高度
  2. 增加一个空的div，然后清除所有浮动
  3. 在父级元素中增加一个overflow
  4. 父类添加一个伪类
1
2
3
4
5
#father:after{
    content:'';/*增加一个空内容块*/
    display：block;
    clear:both;
}

定位 position

相对定位 position:relative

绝对定位 position:absolute

绝对定位时：

  1. 父元素没有定位时，绝对定位相对于浏览器定位
  2. 父元素有定位时，绝对定位相对于父元素定位

并对top(上)、bottom（下）、left（左）、right（右）进调整

1
2
position:relative;
top:正负数值px;

固定定位position:fixed

相对于浏览器定位，且一直不变

z-index

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

属性值

值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

opcity透明度

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！