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> < ...

随机推荐

c#Dapper mysql按时间段查询和过滤
#endregion /// <summary> /// 根据条件获取集合 /// </summary> /// <param name="id"&g ...
Vue.$nextTick
`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. `Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调
从Excel获取请求体
Excel文件 .py文件---------------------- import xlrdimport re def fetch_body(path,sheet,name,adict): ...
《Oracle查询优化改写技巧与案例》学习笔记-------使用数字篇
一个系列的读书笔记,读的书是有教无类和落落两位老师编写的<Oracle查询优化改写技巧与案例>. 用这个系列的读书笔记来督促自己学习Oracle,同时,对于其中一些内容,希望大家看到以后, ...
20172306 2018-2019-2 《Java程序设计与数据结构》第九周学习总结
20172306 2018-2019-2 <Java程序设计与数据结构>第九周学习总结教材学习内容总结无向图图是由结点和这些结点之间的连接构成就图来说,结点叫做顶点,结点之间的连接 ...
douyin-bot-代码
# -*- coding: utf-8 -*- import sys import random import time from PIL import Image if sys.version_in ...
VS 2017显示“高级保存选项”命令操作方法
Visual Studio提供“高级保存选项”功能,它能指定特定代码文件的编码规范和行尾所使用的换行符.在Visual Studio 2017中,该命令默认是没有显示在“文件”菜单中的.用户需要手工设 ...
CRT-常用命令
1 目录操作 mkdir a ;(新建文件夹) mkdir -p a/b;(新建多及目录文件夹) Rmdir a (a只能是空目录) Rmdir -p a (a可以是多级目录) 2 文件操作 touc ...
【ElasticSearch】 elasticsearch-head插件安装
本章介绍elasticsearch-head插件安装,elasticsearch安装参考:[ElasticSearch] 安装 elasticsearch-head安装和学习可参照官方文档: http ...
jieba库的使用和好看的词元
一.jieba库的使用与说明 1.jieba库基本介绍 jieba库是优秀的中文分词第三方库 -中文文本需要通过分词获得单个的词语 - jieba是优秀的中文分词第三方库,需要额外安装 ...