6月4号笔记

最新推荐文章于 2020-06-23 20:33:11 发布

Dashen__Daiwo

最新推荐文章于 2020-06-23 20:33:11 发布

阅读量246

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Dashen__Daiwo/article/details/106558134

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

6月4日
css使用方式：
1.<!DOCTYPE
（1）声明必须是HTML文档的第一行，位于<html标签之前、
（2）<!DOCTYPE声明的不是<HTML标签；它是指示web浏览器关于页面使用哪个HTML版本进行编写指令
（3）在HTML4.01版本中，<!DOCTYPE声明引用DTD，因为HTML4.01版本基于5GML，DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容
（4）HTML5不是基于5GML所以不需要引用DTD
2 .内链式表：<body style=”background-color-green;margin:0;padding:0;》</body”
3. 嵌入式样式表：<style type=”text/css”》</style
需要将样式在<head》</head中
4.引入样式表：<link rel=”StyleSheet” type=”text/css” href=”style.css”
如下：

<!DOCTYPE html>
<html>
	<head>
	    <title>CSS的使用方式</title>
        <style type="text/css">
		<link rel="stylesheet" type="text/css" href="css使用方式.css">
		</style>
	</head>
	
	<body style="background-color:orange; color:#fff;">
        <h1 >CSS的使用方式</h1>
		<p></p>
	</body>
</html>

定义样式表：
1.HTML标记定义：（1）<p》…</p》
（2）p{属性：属性值；属性1：属性值 }
（3）p可以叫做选择器，定义那个标记中内容执行其中的样式
（4）一个选择器可以控制若干个样式属性，他们之间需要用英语的;隔开，最后一个可以不加”;”
2.Class定义
（1）<p class=”p”》。。。</p》
（2）Class定义是以”.”开始的，如：.p{color: red;}
3.Id定义
（1）以“#”开始的，如：#pp{color: blue;}
4. 优先级问题
（1）ID>Class>HTML
（2）同级时，选择离元素最近的那个：如：

#p{color:red;}
#p{color:green;}
<div id="p">

则表现颜色为green

5.组合选择器：可以同时控制多个元素；如：

h1,h2,h3,h4,p{color:red;font-size:40px}
<div id="ppp" class="p">
	<h1>麦子学院</h1>
	<h2>麦子学院</h2>
	<h3>麦子学院</h3>
	<h4>麦子学院</h4>

最后输出结果相同；
6.伪元素选择器：
（1）a：link正常连接样式
（2）a:hover鼠标放上去的样式
（3）a:active选择链接时的样式
（4）a:visited已访问过链接的样式
如下：

<!doctype html>
<html>
	<head>
	<title>定义css样式（CSS选择器）</title>
	<style type="text/css">
	/*p{color:red;font-size:28px;}*/
	.p{color:green;font-size:28px;}
	.pp{color:red:}
	#ppp{color:blue;}
	h1,h2,h3,h4,p{color:red;font-size:40px}
	a:link{color:red;}
	a:hover{
	color:green;
	}
	a:active{color:yellow;}
	a:visited{color:blue;}
	</style>
	</head>
    <body>
	<p class="p">麦子学院</p>
	<div id="ppp" class="p">
	<h1>麦子学院</h1>
	<h2>麦子学院</h2>
	<h3>麦子学院</h3>
	<h4>麦子学院</h4>
	<p class="pp">麦子学院</p>
	</div>
	<a href="http://www.baidu.com" target="_blink"></a>
	<a href="http://www.taobao.com" target="_blink"></a>
	<a href="http://www.dsfgiha.com" target="_blink"></a>
	<a href="http://www.afhfiwfhie.com" target="_blink"></a>
	</body>
</html>

Dashen__Daiwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6月4号笔记

6月4日css使用方式：1.<!DOCTYPE（1）声明必须是HTML文档的第一行，位于<html标签之前、（2）<!DOCTYPE声明的不是<HTML标签；它是指示web浏览器关于页面使用哪个HTML版本进行编写指令（3）在HTML4.01版本中，<!DOCTYPE声明引用DTD，因为HTML4.01版本基于5GML，DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容（4）HTML5不是基于5GML所以不需要引用DTD2 .内链式表：<body st
复制链接

扫一扫