当前位置: 首页 > 工具软件 > CSSCSS > 使用案例 >

css入门

方嘉言
2023-12-01

什么是 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>
 类似资料: