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

随机推荐

iserver频繁崩溃、内存溢出事故解决小记
一.事故分析在生产项目中,频繁遇到iserver隔一段时间就会出现崩溃的情况. 将iserver错误日志发给技术客服后,说是内存溢出的问题. 查看服务器的配置是32g内存,按理说不该出现此类问题. ...
VirtualBox虚拟机E_INVALIDARG (0x80070057)
转自:http://www.wzwzl.com/zblog/blog_wz/32.html 打开以前的VirtualBox虚拟机文件时,错误提示:返回代码:E_INVALIDARG (0x80070 ...
linux 7安装telnet，设置telnet自启动，使用root telnet登录
1.安装启动服务 # yum install telnet-server # yum install xinetd # systemctl enable xinetd.service # system ...
UVa156
#include <bits/stdc++.h> using namespace std; map<string,int> cnt; vector<string> ...
31. pt-variable-advisor
pt-variable-advisor h=192.168.100.101,P=3306,u=admin,p=admin mysqladmin var>/root/test/pt-variabl ...
awk命令小结
先在此至敬朱双印老师,博客写得很详细:http://www.zsythink.net/archives/tag/awk/ 这是朱双印老师关于awk博客的链接,强力推荐给大家 AWK一般在网上说是一 ...
设计模式学习心得<原型模式 Prototype >
原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式是实现了一个原型接口,该接口用于创建当 ...
insmod 签名问题
问题现象: 通过 insmod 加载 XXX.ko 时候提示: hello: module verification failed: signature and/or required key mis ...
Spring Boot 启动（二）配置详解
Spring Boot 启动(二) 配置详解 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring Boot 配置 ...
Postfix邮件服务器
http://www.postfix.org/INSTALL.html https://www.cnblogs.com/alex-note/p/6840160.html http://linux.vb ...