zoukankan html css js c++ java

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>

行内元素的特点.png

块级元素的特点.png

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

<img/> <input/> <td>

行内块元素的特点.png

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

// 转换
	<style>
	div {
		 100px;
		height: 100px;
		background-color: pink;
		display: inline;   /*把块级元素转换为行内元素*/
	}
	span {
		 100px;
		height: 100px;
		background-color: purple;
		display: block;   /*把行内元素转换为块级元素*/
	}
	a{
		 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{ 
		 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 {
		 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 点赞

查看全文

相关阅读:
mac os programming
Rejecting Good Engineers?
Do Undergrads in MIT Struggle to Obtain Good Grades?
Go to industry?
LaTex Tricks
Convert jupyter notebooks to python files
How to get gradients with respect to the inputs in pytorch
Uninstall cuda 9.1 and install cuda 8.0
How to edit codes on the server which runs jupyter notebook using your pc's bwroser
Leetcode No.94 Binary Tree Inorder Traversal二叉树中序遍历(c++实现）

原文地址：https://www.cnblogs.com/dashucoding/p/11140374.html