css入门

最新推荐文章于 2025-05-22 23:49:05 发布

꧁༺ཌ༈ 长歌 ༈ད༻꧂

最新推荐文章于 2025-05-22 23:49:05 发布

阅读量472

点赞数 1

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Vincent_Dr_W/article/details/89186671

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容，如下实例：

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观

CSS语法

h1 {color:blue;font-size:12px;}
为了让CSS可读性更强，你可以每行只描述一个属性:
CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/" 开始, 以 "/” 结束

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”:

实例
#para1
{
text-align:center;
color:red;
}

Remark ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

实例
.center {text-align:center;}

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
实例
p.center {text-align:center;}
Remark 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
注意:Remark 不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

这是一个段落。

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

测试！

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

CSS 背景属性

Property 描述

background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

实例

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
body 
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

所有CSS文本属性。

属性描述

color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

所有CSS字体属性

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

所有的CSS列表属性

属性描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

CSS盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

CSS边框

border-style 值:
none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

CSS 边框属性

属性描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

CSS轮廓属性

outline 在一个声明中设置所有的轮廓属性 outline-color
outline-style
outline-width
inherit
outline-color 设置轮廓的颜色 color-name
hex-number
rgb-number
invert
inherit
outline-style 设置轮廓的样式 none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width 设置轮廓的宽度 thin
medium
thick
length
inherit

CSS margin(外边距)

所有的CSS边距属性
属性描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

CSS padding(填充属性)

所有的CSS填充属性
属性说明
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

CSS 分组和嵌套选择器

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔。

在下面的例子中，我们对以上代码使用分组选择器：

实例
h1,h2,p
{
color:green;
}

嵌套选择器
它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
实例
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}

CSS 尺寸 (Dimension)

所有CSS 尺寸 (Dimension)属性
属性描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

CSS Display(显示)与Visibility(可见性)

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {visibility:hidden;}
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
实例
h1.hidden {display:none;}

CSS Position(定位)

有两个作用

定位布局模块：Positioned Layout Module
提供与元素定位和层叠相关功能它是核心模块
（1）盒子模型的类型和尺寸
（2）布局模型
（3）元素之间的关系
（4）视口大小、图像大小等其他相关方面
属性：
relative 相对
absolute :绝对定位
fixed 固定
static 回归本真
static

<html>
	<head>
		<meta charset="utf-8">
		<title>change-to-flex</title>
		<link rel="stylesheet" href="./reset.css">
		<style>
			.block{
				position:relative;//相对位置
				top :10px;//相对顶部10像素
				width:
				height;
				line-height;//线高度
				test-align:center;//文本布局
				border: 2px solid blue;//边框2像素实线蓝色
				box-sizing :border-box;//
			}
			.block:nth-child(2){//选择第二个block
				position：static;
				border-color:red;
			}
		</style>
	</head>
	<body>
		<div class="block">
		A
		</div>
		<div class="block">
		B
		</div>
		<div class="block">
		C
		</div>
		<div class="block">
		D
		</div>
	</body>
</html>

relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-relative</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
                .parent {
                        width:300px;
                        height:300px;
                        background: blue;
                }
                .parent div {
                        width: 80px;
                        height: 80px;
                }
        .sub-1 {
                position:relative;
                background: red;
                top:20px;
                left: 50px;
        }
        .sub-2 {
                        background: green;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="sub-1"></div>
        <div class="sub-2"></div>
    </div>
    <div class=""></div>
</body>
</html>

absolute

<html>
<head>
	<meta charset="utf-8">
	<title>absolute</title>
	<link rel="stylesheet" >href="./reset.css">
	<style>
		.parent{
			position:relative;
			width:200px;
			height:200px;
			background:red;
		}
		.sub{
			position:absolute;
			width:50px;
			height;
		}
		.tl{
			top:0;
			left:0;
			background:green;
		}
		.tr{
			

		}
		.br{

		}
		.bl{

		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="sub tl"></div>
		<div class="sub trl"></div>
		<div class="sub br"></div>
		<div class="sub bl"></div>

	</div>
</body>
</html>

sticky 磁贴定位
inherit
.box{
position:relative;
}
z-index;

CSS 选择器件

id选择器//常见
元素选择器//常见
类(class)选择器//常见
属性选择器
元素选择器和类选择器可以复用
在

祖先元素
后代元素
父元素
子元素
兄弟元素

伪元素(虚拟的元素)
::before会为当前元素创建一个子元素作为伪元素
::after 用来匹配以选中月元素的一个虚拟的最后子元素
q::before{
content:"<<";
color:ligthgreen;
}
q::after{
content:">>";
color:lightgray;
}
属性选择器
[title] {
color:lightgray;
}

CSS布局

两行三列布局(新闻/博客)
第二行中分为三列

<style>
html,body{//没有外边界
	margin: 0px;
}
header {
	background-color:lightblue;
	height;150px;
}
#container{
	background-color:lightgray;
	height:450px;
}
nav {
	background-color:lightgreen;
	height:100%;
	width:150px;
	float:left;
}
aside{
	background-color:lightcoral;
	height:100%;
	width:150px;
	float:right;
}
article{
	background-color:lightgreen;
	height:100%l
	
}
</style>
<header></header>
<div id="container">
	<nav></nav>
	<aside></aside>
	<article>
		<p>这是一个段落内容</p>
	</article>
</div>

三行两列布局

<head>
  <style>
  html,body{
  	margin:0px;
  }
  #container{
  	background-color:lightblue;
  	height:450px;
  }
  header,footer{
  	background-color:lightgreen;
  	height:150px;
  }
  nav{
  	background-color:lightcoral;
  	height:100%;
  	width:150px;
  	float:left;
  }
  article{
  	background-color:lightslatergray;
  	height:100%;
  	margin-left:150px;
  }
  </style>
  </head>
  <body>
  <header></header>
  <div id="container">
  <nav></nav>
  <article></article>
  <footer></footer>
  </div>
  </body>

CSS中的float

参数： left , right, none, inherit
float:inherit 继承浮动（继承父元素的浮动属性）

<style>
	.test{
		width:100px;
		height:100px;
		background:red;
		float:left;
		margin-right:10px;
	}
</style>
<body>
	<div class="test"></div> 
</body>

float文字环绕图片

脱离正常的文本流（依然占据空间）

 <style>
	.per{
		width:400px;
		height:400px;
		border:1px solid red;
		
	}
	img{
		float:left;//让图片浮动
	}
  </style>
  <body>
  	<div class="per">
		<img src="logo.png" width="200" alt="">
		文字
	</div>
  </body>

浮动的副作用与原因

clear属性（不允许有浮动的属性）

clear：none
clear：left
clear：right
clear：both

overflow（截断）和zoom（使父元素同步于子元素）一起使用可以兼容浏览器

浮动实战案例

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>float</title>
<style>
	*{
		padding:0;//内边距（有颜色）
		margin: 0;//外边距（透明）
	}
	.head{
		width:100%;
		height:64px;
	}
	.logo{
		width:160px;
		heitht:40px;
		float:left;
	}
	.nav{
		width:100%;
		height:64px;
		float:left;
	}
	.nav-li{
		width:80px;
		text-align:center;
		line-height:64px;
		height:64px;
		float:left;
	}
	.icons{
		width:320px;
		height:64px;
		float：right;
	}
	.i01{
		width:64px;
		height:64px;
		float:left;
		background:url("001.png") center center no-repeat;
		
	}
		.i02{
		width:64px;
		height:64px;
		float:left;
		background:url("002.png") center center no-repeat;
		
	}
		.i03{
		width:64px;
		height:64px;
		float:left;
		background:url("003.png") center center no-repeat;
		
	}
		.i04{
		width:64px;
		height:64px;
		float:left;
		background:url("004.png") center center no-repeat;
		
	}
		.i05{
		width:64px;
		height:64px;
		float:left;
		background:url("005.png") center center no-repeat;
		
	}
</style>
</head>
<body>
<div class="head">
<div class=""logo><img src="logo.png" width="160" height="40" alt="">
</div>
<div class="nav">
	<div class="nav-li">实战</div>
	<div class="nav-li">路径</div>
	<div class="nav-li">猿问</div>
	<div class="nav-li">手记</div>
</div>
<div class="icons">
	<div class="i01"></div>
	<div class="i02"></div>
	<div class="i03"></div>
	<div class="i04"></div>
	<div class="i05"></div>
</div>
</div>
</body>
</html>