css基础

最新推荐文章于 2022-07-19 20:49:05 发布

luyunix

最新推荐文章于 2022-07-19 20:49:05 发布

阅读量136

点赞数

分类专栏： HTML，CSS，JS的学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_37311400/article/details/78705569

版权

HTML，CSS，JS的学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

网页源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css案例</title>
		<style type="text/css">
			/*css第二种属性使用场合,内部样式作用域是网页本身*/
			/*元素选择器,优先级最低*/
			a{
				text-decoration: none;/*去掉超链接下划线*/
			}
			p,h3{
				color: #FF0000;
			}
			/*id选择器,优先级最高*/
			#myp{
				color: #00FF00;
			}
			#mycc{
				color: #000000;
			}
			/*类选择器,优先级较高!important提升样式属性权限*/
			.myc{
				color: #11FFFF;
			}
			/*属性选择器*/
			/*
			 *  [attribute]	用于选取带有指定属性的元素。
				[attribute=value]	用于选取带有指定属性和值的元素。
				[attribute~=value]	用于选取属性值中包含指定词汇的元素。
				[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
				[attribute^=value]	匹配属性值以指定值开头的每个元素。
				[attribute$=value]	匹配属性值以指定值结尾的每个元素。
				[attribute*=value]	匹配属性值中包含指定值的每个元素。
			 */
			a[href]{
				color: red;
			}
			ul em {
				color: red; 
				font-weight: bold;
			}
			h1 > strong {
				color: red;
			}
			/*import语法导入css*/
			@import url("../css/main.css");
		</style>
		<!--HTML标签链接css-->
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
	</head>
	<body>
		<!--css第一种属性使用场合,行内样式就是给网页元素设置style属性-->
		<!--css样式属性名词:属性值;-->
		<!--样式优先级,满足就近原则-->
		<p style="color: #0000FF; font-size: 32px;">p1</p>
		<p id="mycc" class="myc">p2</p>
		<p id="myp">p3</p>
		<h3>333</h3><br />
		<a href="../index.html">会变红</a><br />
		<a name="w">不会变红</a><br />
		<!--
        	有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
			例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
			因此，ul em 将会选择以下标记中的所有 em 元素：
        -->
		<ul>
		  <li>List item 1
		    <ol>
		      <li>List item 1-1</li>
		      <li>List item 1-2</li>
		      <li>List item 1-3
		        <ol>
		          <li>List item 1-3-1</li>
		          <li>List item <em>1-3-2</em></li>
		          <li>List item 1-3-3</li>
		        </ol>
		      </li>
		      <li>List item 1-4</li>
		    </ol>
		  </li>
		  <li>List item 2</li>
		  <li>List item 3</li>
		</ul>
		<!--
			如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
			例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
		-->
		<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
		<h1>This is <em>really <strong>very</strong></em> important.</h1>
	</body>
</html>

网页效果