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

随机推荐

.NET、JAVA和PHP在Web开发的优缺点
现在做Web开发,用哪个平台哪种语言其实本质上没有太大的区别,因为Web开发框架已经非常成熟,只要符合需求,能按时交付产品就ok了. 要选择哪个平台,是个商业问题,不是技术问题. 选择任何的语言最好深 ...
Hishop数据库根据产品ProductID取产品规格
#region 产品规格 public static string GetSku(int ProductId) { DataTable skus =GetSkus(ProductId); // Res ...
QTcpSocket 相关知识总结
1. 连接服务器 m_tcpSocket->connectToHost("127.0.0.1", 9877); connected = m_tcpSocket->wa ...
[C#.net]SqlDataAdapter 执行超时已过期完成操作之前已超时或服务器未响应
随着数据库数据的不断增大,查询时间也随之增长.而客户端与数据库连接时间以及命令的执行时间都是有限的.默认为30s.所以在查询数据的时候,程序会出现 “超时时间已到.在操作完成之前超时时间已过或服务器未 ...
Appium+Python自动化 1 环境搭建（适用windows系统-Android移动端自动化）
一.安装并配置 java jdk ①下载 java jdk后安装,安装完成后,配置环境变量打开计算机->系统属性->高级系统设置->环境变量->新建(系统变量),如图所示: ...
ajax轮询与长轮询
刚刚网了关于轮询的知识,必须拿到自己这里来做个备份了! 其实以前用ajax轮询做个及时数据更新的,只是当时做了不知道那个就是轮询. 首先我们什么时候会想到用轮询技术呢? 一般而言,最多的是及时信息 ...
基于ajax提交数据
昨日回顾: 1 inclusion_tag -干什么用的?生成html的片段(动态,传参数,传数据) -app下新建一个模块,templatetags -创建一个py文件(mytag.py) -fro ...
MQTT
1.IBM提出,适用于IOT,订阅和发布模式. 2.订阅和发布模式:这种模式是异步的形式,有些类似于邮件接发的形式,发送者将邮件发至代理,接收者如果没同时接收,也不影响发送者的二次发送. 3.主题模式 ...
小白Monkey学习笔记
Monkey是google提供的一款对Android app进行压力测试工具,基于随机坐标位置,进行点击.滑动.输入等操作. Monkey的环境配置 pc电脑需要配置adb环境 Monkey程序由An ...
OC中重写set和get方法、懒加载
在写OC程序的时候,在很多时候我们会用到重写set或者get方法,重写这两个方法大多是用于刷新数据,比如懒加载. 意思就是说当你去调用set或者get方法时,系统会去调用重写的get或者set方法,这 ...