Css选择器+字体排版

最新推荐文章于 2024-07-24 20:42:50 发布

Naraseny

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量323

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_62881798/article/details/123276554

版权

网页的三大基石：

1.HTML：结构

2.CSS：美化

3.JavaScript:动态

1.认识CSS样式
CSS全称为"层叠样式表(Cascading Style Sheets)"主要用以定义html内容在浏览器内的显示样式。

2.CSS代码语法
CSS样式有选择符(选择器)和声明组成,而声明又有属性和值组成。如下：
p{color:blue}

3.CSS注释代码
/* 代码注释 */||//

4.CSS样式的位置及相关的优先级
    4.1 内联式CSS样式：直接写在现有的html标签中
    4.2 嵌入式CSS样式：写在当前的文件中，一般位于head标签内
    4.3 外部式CSS样式：写在单独的一个文件中（.css）<link>标签引入
    4.4 三种方式的优先级：内联式>嵌入式>外部式

5.CSS选择器
5.1 什么是选择器？
每一条css样式定义由两部分组成，形式如下：
选择器{样式;}

5.2 标签选择器、类选择器、ID选择器（最常用的三种选择器）
   标签选择器：标签{}
   类选择器：.class{}
   id选择器：#id{} 同一个网页中只允许一个id

5.3 其它选择器：子选择器（>），包含（后代选择器）(空格)
通用选择器（*）、伪类选择器(a:hover)、分组选择器(标签,标签)

6.CSS格式化排版
    6.1 文字排版--字体 font-family 宋体、微软雅黑
    6.2 文字排版--字号、颜色   font-size   color
    6.3 文字排版--粗体 font-weight
    6.4 文字排版--斜体 font-style
    6.5 文字排版--下划线 text-decoration:underline
    6.6 文字排版--删除线 text-decoration:line-through
    6.7 文字排版--缩进 text-indent:2em    em代表文字的2倍大小
    6.8 文字排版--行间距(行高) line-height
    6.9 文字排版--中文字间距、字母间距 letter-spacing
    6.10 文字排版--对齐 text-align

7.CSS背景（background）
    background （缩写形式）
    background-color（背景色）
    background-image（背景图）
    background-repeat（背景图重复方式）
    background-position（位置坐标、偏移量）

8.CSS列表（ul、ol）
list-style
list-style-image

9.盒模型
    9.1 元素分类
    在布局前，了解：html标签元素分为三种类型：块状元素、内联元素(又叫行内元素)、内联块状元素。display属性设置

    9.2 常用的块状元素有：独占一行，元素的高度、宽度、行高以及顶和底边距都可设置
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

9.3 常用的内联元素有：和其他元素都在一行上，元素的高度、宽度及顶部和底部边距不可设置
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

9.4 常用的内联块状元素有：和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置
<img>、<input>

9.5 什么盒子模型？（月饼例子）块状元素都具有盒子模型的特定
由margin、padding、border、content组成

CSS的使用：

1.CSS的基本使用

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
 
	<!-- 嵌入式css样式设置 -->
	<style type="text/css">
		/*import导入css文件*/
		@import url("css/importStyle.css");
 
		h1{
			color: red;
		}
 
	</style>
 
	<!-- 外部式引入 -->
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<!-- 
		CSS:层叠式样式表
			作用：美化HTML标签。
		
		HTML标签自带的属性很少，不能达到我们用户的需求，借助css来完成。
		在已有的HTML页面中如何引入css样式代码
			4种方式
		(1)行内式样式引入
			利用HTML自带的style属性来实现行内式样式css引入
				style属性中调用css样式的语法
					属性名:属性值;
					属性名:属性值;属性名:属性值;属性名:属性值;
					
					
					
		(2)嵌入式样式引入
			必须在head标签中编写style标签
			借助css选择器结合使用
			css选择器： 在标签上通过特定的属性进行设置记号，
			将来通过嵌入式的方式拿到记号即可设置指定标签的样式。
			任何一个标签上自带一个记号（选择器）  
				元素选择器|标签选择器
		(3)外部式link引入
			必须在head标签内通过link标签引入外部式css文件进行设置样式
		(4)外部式import引入(很少用)
			在head中必须编写style标签
			通过import关键词引入
	 -->
 
	 <font color="red" size="7" style="background: yellow;">好好学习,天天向上</font>
 
	<h1>我是谁我在哪里我要干什么</h1>
	<h1>我是谁我在哪里我要干什么</h1>
	<h1>我是谁我在哪里我要干什么</h1>
	<h1>我是谁我在哪里我要干什么</h1>
 
	<p>我是p段落标签</p>
 
	<div>
		康总最帅
	</div>
</body>
</html>
 
外部引入代码！！！！！！
 
p{
	font-size: 30px;
	color: red;
	background: yellow;
}

2.css选择器的使用

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*标签选择器*/
		div{
			width: 100px;
			height: 100px;
			/*设置边框线*/
			border: 1px solid red;
		}
		/*ID选择器设置css*/
		#dyk{
			background-color:yellow;
		}
 
		/*类选择器设置css*/
		.zz{
			background-color: green; 
		}
	</style>
 
 
	<!-- js代码 -->
	<!-- <script type="text/javascript">
		window.onload = function(){
			//根据id获取元素
			var oDiv = document.getElementById("dyk");
			alert(oDiv.innerHTML);
		};
	</script>
 -->
 
</head>
<body>
	<!-- 
		选择器的使用
			在标签上做记号，可以在style标签中借助选择器设置标签的样式
		选择器：
			元素选择器   其实就是标签本身名称
			ID选择器     在标签上设置一个id属性  id属性的值自定义
				id属性的值在一个页面上值允许出现一次，否则会覆盖
					覆盖：样式不会覆盖，但是通过js获取标签时覆盖
			必须在指定选择器的前面+#
			类选择器     在标签上设置一个class属性，  class属性的值自定义
			class属性的值可以相同
				必须在指定选择器的前面+.
		语法：
			css引入方式——嵌入式或者外部式引入
			选择器名称{
				属性名:属性值;
				属性名:属性值;
				属性名:属性值;
				属性名:属性值;
			}
	 -->
 
	<div id="dyk">邓炎康</div>
	<br>
	<div class = "zz">康康</div>
	<br>
	<div class="zz"></div>
 
 
</body>
</html>

3.css文本上的设置

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100%;
			height: 30px;
			border: 1px solid red;
			/*background: red;*/
		}
		#oDiv1{
			/*background: yellow;*/
			/*设置字体大小*/
			font-size: 20px;
		}
		#oDiv2{
			color: red;
		}
		#oDiv3{
			/*显示下划线*/
			text-decoration: underline;
		}
		a{
			/*去除下划线*/
			text-decoration: none;
		}
 
		#oDiv4{
			/*设置字体加粗*/
			font-weight: bold;
		}
 
		#oDiv5{
			/*设置倾斜*/
			font-style: oblique ;
		}
 
		#oDiv6{
			font-family: "华文彩云";
			color: blue;
			font-size: 20px;
			/*设置文字之间的间距*/
			letter-spacing: 10px;
			/*设置文字的缩进（针对第一个）*/
			/*text-indent: 2em;*/
 
			/*设置文本居中对齐*/
			text-align: center;
 
			/*垂直居中  利用height和line-height行高 */
			height: 100px;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<!-- css文本的属性样式 -->
	<div id="oDiv1">我的地盘我做主</div>
	<br>
	<div id="oDiv2">我用双手成就你的梦想</div>
	<br>
	<div id="oDiv3">我用双手成就你的梦想</div>
	<br>
	<div>
		<a href="www.baidu.com">百度一下</a>
	</div>
	<br>
	<div id="oDiv4">
		我用双手成就你的梦想
	</div>
	<br>
	<div id="oDiv5">
		哈哈哈哈
	</div>
	<br>
	<div id="oDiv6">
		我用双手成就你的梦想
	</div>
	<br>
	<div></div>
	<br>
	<div></div>
	<br>
	<div></div>
 
 
 
 
</body>
</html>

4.css背景的使用

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 嵌入式css -->
	<style type="text/css">
		/*需求：设置网页的背景图片*/
		body{
			/*设置背景background*/
			/*background-image: url(img/1.jpeg);*/
			/*问题：当图片过小时，会自动平铺（横向+纵向）*/
			/*横向平铺*/
			/*background-repeat: repeat-x;*/
			/*纵向平铺*/
			/*background-repeat: repeat-y;*/
			/*不平铺*/
			background-repeat: no-repeat;
 
		}
 
		#oDiv{
			width: 400px;
			height: 300px;
			border: 1px solid red;
			background-image: url(img/1.jpeg);
			background-repeat: no-repeat;
			/*定位——一张大图中虚招指定的小图片显示*/
			background-position:-100px -100px;
		}
 
 
		#oDiv2{
			border:  1px solid red;
			height: 200px;
			width: 100%;
		}
 
		span{
			border: 1px solid red;
			width: 200px;
		}
		p{
			border: 1px solid red;
		}
		img{
			width: 200px;
			height: 200px;
		}
		ul{
			/*去除列表的符号*/
			list-style: none;
		}
		ul>li{
			/*border: 1px solid red;*/
			height: 20px;
			width: 20px;
			/*display属性——可以根据该属性在三大分类中相互转换*/
			display: inline-block;
			background-image: url("img/gg.png");
			background-position: -15px -16px;
		}
 
		ul .sb1{
			background-position: -15px -53px;
		}
	</style>
 
 
 
</head>
<body>
	<!-- css背景设置 -->
 
 
	<div id="oDiv">
	</div>
 
 
	<!-- HTML标签分类：三大类 -->
	<!-- 
		1.行内标签
			特点：都在一行显示，如果一行显示排满才在另外一行进行显示，不能设置宽度和高度
		2.块状标签
			特点：内容没有排满也会自动占满整行，可以设置宽度和高度
		3.行内-块状标签
			特点：都有（在一行显示  也可以进行设置宽和高）
	 -->
 
 
 
	<div id="oDiv2">
			
		<ul>
			<li></li>
			<li class="sb1"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
 
 
 
	</div>
 
	<span>行内标签</span>
	<span>行内标签</span>
	<span>行内标签</span>
	<span>行内标签</span>
	<hr>
	<p>段落</p>
	<p>段落</p>
 
	<img src="img/1.jpeg" alt="">
	<img src="img/1.jpeg" alt="">
	<br><br><br><br><br><br><br><br><br><br><br>
 
 
</body>
</html>
 
 
 
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- frameset标签  框架标签  将网页分割成几个等分
		rows    横向分割  rows = "20%,*"
		cols    纵向分割
		frame  子标签  控制内容的显示  引入HTML页面
		iframe   src
	 -->
</body>
</html>

Naraseny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css选择器+字体排版

网页的三大基石：1.HTML：结构2.CSS：美化3.JavaScript:动态1.认识CSS样式 CSS全称为"层叠样式表(Cascading Style Sheets)"主要用以定义html内容在浏览器内的显示样式。2.CSS代码语法 CSS样式有选择符(选择器)和声明组成,而声明又有属性和值组成。如下： p{color:blue}3.CSS注释代码 /* 代码注释 */||//4.CSS样式的位置及相关的优先级 4.1 内联式CSS样...
复制链接

扫一扫