Day3:html和css

Day3:html和css

多类名选择器

样式的显示效果是跟html元素中的类名先后顺序无关,而是跟css样式的书写上下顺序有关.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	 .red {

	 	color: red;

	 }

	 .font {

	 	font-size: 20px;

	 	color: blue;

	 }

	</style>

</head>

<body>

	<div class="font red">多类名</div>

	<div>多类名</div>

	<p class="red">多类名</p>

	<p>多类名</p>

	<p class="red">多类名</p>

	<div>多类名</div>

</body>

</html>

`id`选择器

id选择器是使用#符号的:

#id名{属性:属性值;}

class好比人的名字,可以多次使用,而id选择器是代表唯一的,如人的身份证号码.一个id只能使用一次.(不允许使用多次,浏览器兼容性好,虽然可以用多次,但是是不允许这样做的)

id只使用一次,class可以使用多次.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	#lt {

		color: blue;

	}

	</style>

</head>

<body>

	<div>id选择器</div>

	<div id="lt" class="red">id选择器</div>

</body>

</html>

通配符选择器

*代表所有,通配符选择器用*号表示.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	 * {

		color: blue;

	 }

	</style>

</head>

<body>

	<div>我是文字</div>

	<p>我是文字</p>

	<span>我是文字</span>

	<table>我是文字</table>

</body>

</html>

基础选择器

标签选择器 - <div> <span> <table> <input>
类选择器 - .nav可使用多次
id选择器 - 只能使用一次
通配符选择器 - 几乎不用

字体样式

css是如何控制样式的

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	* {

		font-family: "microsoft yahei",  Arial;

	}

	p {

		font-size: 16px;

		line-height: 28px;

		text-indent: 2em;

	}

	a {

		font-weight: 700;  /* 700 没有单位  ==  bold  */

	}

	h1 {

		font-weight: 400;  /*让粗体不加粗  400 == normal 建议用数值*/

		text-align: center; /*文字水平居中*/

	}

	em {

		color: blue;

		font-style: normal;

	}

	span {

		color: #FDD000;

	}

	div {

		text-align: center;

	}

	.nub {

		color: #f00;

		font-weight: 400;

	}

	</style>

</head>

<body>

	<h1>123</h1>

<div>2018 <span>体育</span><a href="#">收藏本文</a></div>

<hr />

<p>新浪<em>[微博]</em>中国</p>

</body>

</html>

字体样式属性:

font-size字体大小;

单位	说明
`em`	1`em`相当于一个字体
`px`	像素
`in`	英寸
`mm`	毫米
`pt`	点

在网页统一使用px

font-family:字体

p{font-family:"微软雅黑";}

font-weight:字体

语法:

font-weight: normal | bold | bolder | lighter | number |

参数:

normal正常字体

bold:粗体

span{ font-weight: 600}

font-style:字体类型

// 语法

font-style: normal  | italic |

italic: 斜体

要点:

数字400等于normal,而700等于bold

font-style font-weight font-size font-family

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	h1 {

		/*font-size: 25px;

		font-family: "宋体";

		font-weight: 400;*/

	}

	/*选择器{font: font-style  font-weight  font-size/line-height  font-family;}*/

	h1 {

		font: 12px "微软雅黑";

	}

	</style>

</head>

<body>

	<h1>字体连写</h1>

</body>

</html>

文本样式

color属性:

预定义的颜色
十六进制
RGB代码

红加绿黄,红绿蓝.

line-height:行间距

text-align:水平居中,让盒子中的文本居中

text-indent:首行缩进

left right center

`textOdecoration`文本的修饰

值	说明
`none`	默认
`underline`	文本下的一条线
`overline`	定义文本上的一条线
`line-through`	定义穿过文本下的一条线

语法：

text-decoration : none || underline || blink || overline || line-through

参数：

none : 　无装饰

blink : 　闪烁

underline : 　下划线

line-through : 　贯穿线

overline : 　上划线

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Dome</title>

	<style>

	div {

		 font-size: 30px;

		  /*text-decoration: none;  取消装饰*/

		  /*text-decoration: underline; 下划线*/

		  /*text-decoration: overline; 上划线*/

		  /*text-decoration: line-through;  删除线*/

		  font-style: italic;

	}

	s {

		text-decoration: none; /* 取消删除线*/

	}

     em {

     	font-style: normal;

     }

     strong {

     	font-weight: 400;

     }

     ins {

     	text-decoration: none;

     }

	</style>

</head>

<body>

	<div>达叔小生</div>

	<s>现在</s>

	<em>倾斜</em>

        <i>倾斜</i>

	<strong>加粗</strong>

	<ins>下划线</ins>

</body>

</html>

复合选择器

// 子代选择器

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	ul li  a  {

		color: red;

	}

	ul li > a {

	}

	ul  a  {

		color:red;

	}

	ul > li > a {

	}

	</style>

</head>

<body>

	<ul>

		<li>

			<a href="#">一级菜单</a>

			<div>

				<a href="#">二级菜单</a>

				<a href="#">二级菜单</a>

				<a href="#">二级菜单</a>

			</div>

		</li>

	</ul>

</body>

</html>

后代选择器

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Dome</title>

	<style>

	 .father > li > a {

		color: red;

	 }

	</style>

</head>

<body>

	<ul class="father">

		<li>

		   <a href="#">123</a>

		   <ul>

		      	<li>

		      		<a href="#">abc</a>

		      	</li>

		    </ul>

		</li>

	</ul>

</body>

</html>

后代选择器例子:

div p {

 color: blue;

}

<div>

 <p> </p>

</div>

.da p{

 color: blue;

}

<div class="da">

 <p></p>

</div>

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div p  {

		color: pink;

	}

	.jianlin p {

		color: purple;

	}

	ul li {

		color: red;

	}

	</style>

</head>

<body>

	<div> 1 </div>

	<div> 1 </div>

	<div> 1 </div>

	<div>

	    <p>2</p>

	</div>

	<div>

	    <p>2</p>

	</div>

	<div>

	    <p>2</p>

	</div>

	<div class="jianlin">

	    <p>3</p>

	</div>

	<p> 1 </p>

	<p> 1 </p>

	<ul>

		<li>苹果</li>

		<li>梨子</li>

		<li>苹果</li>

		<li>梨子</li>

	</ul>

	<ol>

		<li>苹果</li>

		<li>梨子</li>

		<li>苹果</li>

		<li>梨子</li>

	</ol>

</body>

</html>

交集选择器和并集选择器

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

		div.red {

			color: red;

		}

	</style>

</head>

<body>

	<div>交集选择器</div>

	<div class="red">交集选择器</div>

	<p>交集选择器</p>

	<p class="red">交集选择器</p>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

    div, p, span {

    	color: red;

    }

	</style>

</head>

<body>

	<div>并集选择器</div>

	<p>并集选择器</p>

	<span>并集选择器</span>

	<h1>并集选择器</h1>

	<a href="#">并集选择器</a>

</body>

</html>

链接伪类选择器

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标移动到链接上

:active 选定的链接

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	a:link {  /* 未访问过的连接状态*/

		color: #3c3c3c;

		font-size: 25px;

		text-decoration: none;  /*取消下划线*/

		font-weight: 700;

	}

	a:visited {

		color: orange;

	}

	a:hover {  /*鼠标经过连接时候的样子*/

		color: #f10215;

	}

	a:active {  /*鼠标按下时候的样子*/

		color: green;

	}

	</style>

</head>

<body>

	<a href="http://www.12312312.com"></a>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	 a {

	 	color: #333;

	 	text-decoration: none;

	 	font-size: 25px;

	 	font-weight: 700;

	 }

	 a:hover {  /*鼠标经过*/

		color: #f10215;;

	 }

	</style>

</head>

<body>

	<a href="http://2312312312.com"></a>

</body>

</html>

	<style>

	   .site-r a {

	   	  color: red;

	   }

	   .nav a {  /*后代选择器*/

	   	  color: orange;

	   }

	   .nav, .sitenav {   /*并集选择器*/

	   		font: 14px "微软雅黑";

	   }

	   .nav> ul > li > a {  /*子代选择器*/

	   	color: green;   /*123123123  */

	   }

	</style>

显示模式

display显示模式

block-level块级元素

<h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>等

`inline-level`行内元素

<a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>

行内块元素(`inline-block`)

<img/> <input/> <td>

块转行内: display:inline

行内转块: dispaly:block;

块,行内元素转为行内块: dispaly: inline-block;

// 转换

	<style>

	div {

		width: 100px;

		height: 100px;

		background-color: pink;

		display: inline;   /*把块级元素转换为行内元素*/

	}

	span {

		width: 100px;

		height: 100px;

		background-color: purple;

		display: block;   /*把行内元素转换为块级元素*/

	}

	a{

		width: 100px;

		height: 100px;

		background-color: skyblue;

		display: inline-block;   /*把行内元素转换为行内块元素*/

	}

	</style>

<body>

	<div>123</div>

	<div>123</div>

	<div>123</div>

	<span>abc</span>

	<span>abc</span>

	<span>abc</span>

	<a href="#">百度</a>

	<a href="#">百度</a>

	<a href="#">百度</a>

	<a href="#">百度</a>

</body>

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.nav {

		text-align: center;

	}

	.nav a{

		width: 120px;

		height: 50px;

		display: inline-block;

		background-image: url(images/bg.png);

		text-align: center;

		color: #fff;

		text-decoration: none;

		line-height: 50px;

	}

	.nav a:hover {

		background-image: url(images/bgc.png);

	}

	.banner {

		text-align: center;

	}

	p {

		width: 100px;

		height: 20px;

		display: inline-block;

	}

	</style>

</head>

<body>

	<div class="nav">

		<a href="#">网站导航</a>

		<a href="#">网站导航</a>

		<a href="#">网站导航</a>

		<a href="#">网站导航</a>

	</div>

	<div class="banner">

		<p>123</p>

	</div>

	<a href="#">baidu</a>

</body>

</html>

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客：达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

Day3:html和css的更多相关文章

Day6:html和css
Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...
Day5:html和css
Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
Day3 CSS 引入及基本选择器
一 .CSS 层叠样式表,为了使网页元素的样式更加丰富,内容与样式拆分开来.HTML负责结构与内容,表现形式交给CSS. CSS注释/**/ 来注释二.CSS基本语法与引用 CSS的语法结构选择器 ...
Day3前端学习之路——CSS基本知识
课程目标初步了解什么是CSS,掌握基本的CSS概念,语法,针对选择器特殊性的计算处理,以及学习如何设置一些简单的样式任务一:回答问题 1.什么是CSS,CSS是如何工作的? CSS 指层叠样式表 ...
中软培训第一周复习总结 --简单的HTML 与CSS
一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...
Python实例---模拟微信网页登录(day3)
第四步: 扫码成功后获取最近联系人信息---day3代码 settings.py """ Django settings for weixin project. Gene ...
HTML&CSS基础-超链接
HTML&CSS基础-超链接作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,有三个网页 <!DOCTYPE html> <!--Docty ...
HTML&CSS基础-内联框架
HTML&CSS基础-内联框架作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...

随机推荐

初始js闭包&事件的冒泡和捕获&EVENT对象
一.初识闭包 function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var ...
python基础 (函数名,闭包,和迭代器)
1.函数名作用函数名本质上就是函数的内存地址或对象. 1.可以被引用 2.可以被当作容器类型的元素 3.可以当作函数的参数和返回值 4.如果记不住的话,那就记住一句话,就当普通变量用 2.闭包什么 ...
Maven 属性
maven 中使用 ${属性名} 来访问属性内置属性 (maven 预定义,用户可以直接使用的属性) ${basedir} 表示项目根目录,即包含 pom.xml 文件的目录.同 ${projec ...
图数据库-Neo4j使用
Cypher 查询语言简单使用 3.1.基本语法 Node语法: Cypher使用一对圆括号来表示一个节点:提供了多种格式如下: () 匿名节点 (matrix) 为节点添加一个ID (:Movie ...
C语言学习书单
1.C Primer Plus(第六版)(中文版)豆瓣详情 C Primer Plus 最大的缺点可能就是内容太细,对于C语言讲解极为细致,但对于Sequence Point等内容并没有详细讲解. ...
Linux 云计算运维之路
搭建中小型网站的架构图 s1-2 Linux 硬件基础 s3-4 linux 基础文件系统用户权限 s5-6 Linux 标准输出系统优化目录结构 w7 rsync-备份服务器 w8 NFS服 ...
HDU 6346 整数规划 (最佳完美匹配)
整数规划 Time Limit: 5500/5000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total Subm ...
Day07 (黑客成长日记) 函数的参数及作用
定义函数: 1.定义函数注意: (1)位置参数:直接定义函数. def func(a,b): print(a,b) func(1,2) (2)默认参数:关键字参数:参数名= ‘默认的值‘ def fu ...
[swarthmore cs75] Compiler 6 – Garbage Snake
课程回顾 Swarthmore学院16年开的编译系统课,总共10次大作业.本随笔记录了相关的课堂笔记以及第9次大作业. 赋值的副作用:循环元组下面的代码展示了Python3是如何处理循环列表(pri ...
JS中encodeURI()、decodeURI()、encodeURIComponent()和decodeURIComponent()编码与解码
编码解码问题. 解决这个问题大家一般都使用encodeURI或者encodeURIComponent方法,在这里做一下总结: 首先看看各个方法不同浏览器的支持程度函数描述 FF N IE deco ...