CSS基础与高级应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40409115/article/details/80726183

<!DOCTYPE html>
<!-- CSS：
一、样式层叠次序：
    1.浏览器缺省
    2.外部样式表
    3.内部样式表（<<head>内部的样式）
    4.内联样式（HTML元素内部）=》优先级最高
二、CSS基础语法
    Selector选择器{属性和具体设置值}

    Selector{property:value...}  eg：h1{color:red;font-size:14px}
三、CSS样式单基本使用：
    1.链接外部样式文件：这种方式将样式和HTML文档彻底分离，样式文件需要额外引用，采用这种方式，一个CSS样式上单可以控制多个HTML文档
    2.导入外部样式文件：@import
    3.采用内部样式定义：这种方式是在HTM了文档头部定义，采用这种方式，每个CSS样式只控制一份HTML文档
    4.使用内联样式：将样式内联定义咋具体的HTML元素，精准控制一个HTML元素表现，每个CSS样式只控制单个HTML元素。
四、CSS选择器（有元素有属性值）
   ① Selector选择器：
    1.元素选择器:E{......} /* E代表有效的HTML元素名 */
    2.属性选择器：E[attr]:该CSS样式对具有attr属性的E元素起作用
                 E[attr=value]:该样式对所有包含attr属性，且属性值为value的E元素起作用。
    3.E[attr^="value"]:改CSS样式对所有包含attr属性，且属性值是以value开头的字符串E起作用（css3）
    4.E[attr$="value"]:改CSS样式对所有包含attr属性，且属性值是以value结尾的字符串E起作用（css3）
    5.E[attr*="value"]:改CSS样式对所有包含attr属性，且属性值包含value的字符串E起作用（css3）

    当多个CSS样式可以同时对某个HTML元素起作用时，该HTML元素现实的外观是将多个CSS样式”叠加“作用的效果。
    如果多个CSS样式定义有冲突时，则冲突属性以优先级更高的CSS样式取胜。
   ② ID选择器（*****）
    ID选择器指定的CSS样式将会对具有指定ID属性值HTML元素起作用。
    ID选择器语法：
       [E]#idValue{......}
       #idValue{......}：指定该CSS样式对id为idValue的HTML元素起作用

       ID选择器优先级>属性选择器（元素选择器）、class选择器
   ③ class选择器
  [E].classValue{....}
  class选择器对指定css样式具有class属性且值为classValue的HTML元素起作用。
   ④ 包含选择器
    语法：Selector1 Selector2{...}
    Selector2选择器必须处于Selector1选择器对应元素内部
   ⑥ 子选择器
    语法：Selector1>Selector2{..}
    Selector2选择器必须是Selector1选择器对应元素的子元素
五、CSS背景
   背景色：background-color:属性设置背景色，不能继承，默认透明
   背景图片：background-image:url（图片地址） 将图像发个图背景，默认null。
            backgroung-repeat:设置图片平铺（重复方式），默认全平铺。
            background-position:设置显示位置
            关键字、数值 px（距离左上角位置）  百分号数值（距离左上角位置）
            background-attachment:fixed设置背景图片不会随着页面滚动
六、CSS文本
    缩进文本：段落的第一行进行缩进，段落的第一行缩进
    text-indent：正值首行向右缩进，负值首行向左缩进
    百分比：缩进相对于父元素的百分比值

    水平对齐：
    text-align

    字间隔：默认0
    word-spacing：接受一个正值，字之间的间隔会增加
                  负值：字间隔缩短

    字母间距：
    letter-spacing：接受一个正值，字母之间的间隔会增加
                  负值：字母间隔缩短

    字符转换：大小写，对中文无效
    text-transform：
    none默认值
    uppercase全部大写
    lowercase全部小写
    capitalize首字母大写


    文本装饰：
    text-decoration：
    none默认值
    underline下划线  
    overline：上划线
    line-through：中划线
    blink：文本闪烁

    处理空白符：默认normal
    white-space
     pre-line：合并空白符，保留换行符
七、CSS字体
    字体系列 font-family

    字体风格font-style：
     normal（默认）
     italic：文本斜体展示（推荐使用）                                   oblique：文本倾斜展示
    字体变形font-variant：小型大写字母

    字体加粗font-weight（100-900）：
     ligther（100）细体展示
     normal（400）正常展示
     bold（700）粗体展示

    字体大小font-size:

     绝对值：
      将文本设置为指定大小，不允许用户在所在浏览器中改变字体大小 
      用px来设置绝对值文本大小，可以对文本大小进行绝对控制。
     
     相对值：
      使用em单位（W3C推荐使用em单位 1em=16px）
      em的值会随着父元素字体大小改变
八、CSS链接
    链接的四种状态：
     a:link：普通的未被访问的链接
     a:visited:用户已经访问的链接
     a:hover：鼠标指针位于链接的上方
     a:active：链接被点击的时刻
     hover位于link&visited之后
     active位于hover之后
九、CSS列表
    列表类型list-style-type：
-->
<html>
<head>
	<!-- 链接外部样式单(若样式存在于样式单中，推荐使用） -->
	<!-- <link rel="stylesheet" type="text/css" href="demon.css"> -->

	<!-- 导入外部样式单 -->
	<!-- <style type="text/css">
		@import"demon.css"
	</style> -->

	<!-- 内部CSS样式（一般不建议，减缓页面加载速度） -->
	<!-- <style type="text/css">
		body{
			color:red;
			/*多个属性双引号括起来，中间空格隔开*/
			color: "red blue";
		}
		h1{
			color:#00ff00;
		}
		p.ex{
			color:rgb(0,0,255);
		}

	</style> -->


	<!-- <style type="text/css">
		table{
			background-color: #003300;
			width: 400px;
		}
		td{
			background-color: #fff;
			font-family: "楷体_CB2312";
			font-size: 20px;
			text-shadow: -8px 6px 2px #333;
		}
		.title{
			font-size: 18px;
			color: #60c;
			height:30px;
			width: 200px;
			border-top: 3px solid #cccccc;
			border-left: 3px solid #cccccc;
			border-right: 3px solid #000000;
			border-bottom: 3px solid #000000;
		} 
	</style> -->


	<!-- <style type="text/css">
		div{
			background-color: grey;
			font: italic normal bold;
		}
		p{
			background-color: #444;
			color: #fff;
			font: normal small-caps bold 20pt normal 宋体;
		}
	</style> -->


	<!-- <style type="text/css">
		div{
			width: 300px;
			height: 30px;
			background-color: #eee;
			border: 1px solid black;
			padding: 10px;
		}
		div[id]{
			background-color: #aaa;
		}
		div[id*=xx]{
			background-color: #999;
		}
		div[id^=xx]{
			background-color: #555;
		}
		div[id=xx]{
			background-color: #111;
			color: #fff;
		}
	</style> -->



	<!-- <style type="text/css">
		div{
			width: 300px;
			height: 30px;
			background-color: #ddd;
			padding: 10px;
		}
		p#xx{
			border: 2px dotted black;
			background-color: #888;
		}
		div[id=xx]{
			background-color: green;
		}
	</style> -->



	<!-- <style type="text/css">
		.myclass{
			width: 240px;
			height: 40px;
			background-color: #dddddd;
		}
		div[class = myclass]{
			background-color: rebeccapurple;
		}
		div.myclass{
			border: 2px dotted black;
			background-color: #888888;
		}
	</style> -->


	<!-- <style type="text/css">
	     div{
	     	width: 350px;
	     	height: 60px;
	     	background-color: #ddd;
	     	margin: 5px;
	     }
	     div .a{
	     	width: 200px;
	     	height: 35px;
	     	border: 2px dotted black;
	     	background-color: #888;
	     }
	</style> -->



	<!-- <style type="text/css">
	     div{
	     	width: 350px;
	     	height: 60px;
	     	background-color: #ddd;
	     	margin: 5px;
	     }
	     div>.a{
	     	width: 200px;
	     	height: 35px;
	     	border: 2px dotted black;
	     	background-color: #888;
	     }
	</style> -->


	<!-- css背景 -->
	<style type="text/css">
		body{
			background-color: #889900;
		}
		h1{
			background-color: #00ff00
		}
		h2{
			background-color: transparent;
		}
		p{
			background-color: rgb(250,0,250);
		}
		p.no1{
			background-color: gray;
			padding: 20px;
		}
	</style>
	<title>CSS(1)</title>
	<meta charset="utf-8"/>
</head>
<body>
	<!-- <h1>第一段CSS代码</h1>
	<h1 style="color: purple">第一段CSS代码</h1>
	<p class="ex">带有class属性的文本标签</p>
	body体，没有任何而标签。
 -->

	<!-- <div class="title">
		前端课程体系：
	</div><hr>
	<table>
		<tr>
			<td>
				HTML从入门到精通
			</td>
		</tr>
		<tr>
			<td>
				CSS从入门到精通
			</td>
		</tr>
		<tr>
			<td>
				JS从入门到精通
			</td>
		</tr>
	</table> -->


	<!-- <div>div内容</div>
	<p>p中内容</p> -->


	<!-- <div>不带任何属性的div</div>
	<div id="aa">
		具有id属性，但属性值没有xx
	</div>
	<div id= yyxx>具有id属性，且属性包含xx</div>
	<div id = xxyy>具有id属性，且属性值以xx开头</div>
	<div id= xx> 具有id属性，且属性值就是xx</div> -->

	<!-- <div>不带任何属性的div</div>
	<div id="xx">具有id属性且属性值为xx的div</div>
	<p id = "xx">具有id属性且属性值为xx的p</p> -->


    <!-- <div>不带任何属性的div</div>
	<div class="myclass">带有class属性且置为myclass</div>
	<p class="myclass">带有class属性且值不等于myclass</p> -->



	<!-- <div>不带任何属性的div</div>
	<div>
		<p class="a">带有class属性且值为a的p标签</p>
    </div>
    <p class="a">
    带有class属性且值为a的p标签,但是不在div内部
    </p> -->



   <!--  <div>不带任何属性的div</div>
	<div>
		<p class="a">带有class属性且值为a的p标签</p>
        <section>
        	<p class="a">带有class属性且值为a的p标签</p>
        </section>
    </div>
    <p class="a">
    带有class属性且值为a的p标签,但是不在div内部
    </p> -->


   <!--  <h1>h1标签</h1>
    <h2>h2标签</h2>
    <p>不带class属性的p标签</p>
    <p class="no1">带有class1属性的标签</p> -->



    <body>
    	
    </body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<!-- <style type="text/css">
	body{
		background-image: url(longmao.gif);
	}
	a.flower{
		background-image: url(2.gif);
		padding: 20px;
		background-repeat: repeat-x;
		background-position: %50 %50;
	}
	p.flower{
		background-image: url(2.gif);
		padding: 20px;
		background-repeat: repeat-y;
	</style>
 -->

	<!-- <style type="text/css">
	body{

	}
	div{
		width: 500px;
	}
	div#outer{
		width: 500px;
	}
	div#inner{
		text-indent: 10%;
	}
	p{
		/*第一行缩进，余下部分不会缩进，正值首行向右缩进，负值首行向左缩进*/
		text-indent: 10%;
		/*左内边距*/
		padding-left: 5em; 
	}
	</style> -->


	<!-- <style type="text/css">
		p#id{
			text-align: center; 
		}
		p#right: {
			text-align: right;
		}
	</style> -->


	<!-- <style type="text/css">
		p#zheng{
			word-spacing: 0.5em;
		}
		p#fu{
			word-spacing: -0.5em;
		}
	</style> -->


	<!-- <style type="text/css">
		h1{
			letter-spacing: -0.5em;
		}
		h4{
			letter-spacing: 20px;
		}
	</style> -->


	<!-- <style type="text/css">
		h1{
			text-transform: uppercase;
		}
		h4{
			text-transform: capitalize;
		}
	</style> -->


	<!-- <style type="text/css">
		a{
			text-decoration: underline overline line-through blink;
		}
		h4{
			text-decoration: underline;
			text-transform: capitalize;
		}
		h4#id{
			text-decoration: overline;
			text-transform: capitalize;
		}

		p{
			white-space: pre;
		}
	</style> -->

<!-- 
	<style type="text/css">
		body{
			background-image: url(longmao.gif);
			font-family: sans-serif;
		}
		h1{
			/*指定字体和通用字体*/
			font-family: Georgia,serlf;
		}
		p.normal{
			font-style: normal;
		}
		p.ita{
			font-style: italic;
		}
		p.obl{
			font-style: oblique;
		}
	</style> -->


	<!-- <style type="text/css">
	    body{
		background-image: url(longmao.gif);
	    }
		p.normal{
			font-weight: normal;
		}
		p.thin{
			font-weight: lighter;
		}
		p.bold{
			font-weight: bold;
		}
	</style> -->


	<!-- <style type="text/css">
	    body{
		background-image: url(longmao.gif);
		font-size: 100%;
	    }
		p{
			font-size: 1em;
		}
		h1{
			font-size: 30px;
		}
	</style> -->


	<!-- CSS链接 -->
	<!-- <style type="text/css">
	    body{
		background-image: url(longmao.gif);
		font-size: 100%;
	    }
		a:link{
			color: antiquewhite;
			text-decoration: underline;
			background-image: url(1.png);
		}
		a:visited{
			color: blueviolet;
			text-decoration: overline;
			background-color: #FFFF85;
		}
		a:hover{
			color: blue;
			text-decoration: line-through;
			background-color: #FF704D;
		}
		a:active{
			color: green;
			text-decoration: blink;
			background-color: blue;
		}
	</style> -->

	<!-- 列表 -->
	<style type="text/css">
		ul{
			list-style-type: square;
			list-style-type: lower-alpha;
			list-style-image: url(longmao.gif);
			list-style-position: inside;
		}
	</style>
</head>
<body>
	<!-- <p class="flower">有背景的段落
		<a href="#" class="flower">
			设置一个瞄点
		</a>
	</p> -->


	<!-- 长引用标签缩进 -->
	<!-- <blockquote>
		<p>
			长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进.
		</p>
		<div>
			<p>
			长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进长引用标签缩进.
		</p>
		</div>
	</blockquote> -->


	<!-- <div id="outer">
		<div id="inner">
			<p>
			段落文本段落文本
		    </p>
		</div>
	</div> -->


	<!-- <p>
		不带任何属性的p标签
	</p>
	<p id="id">带有id属性的p标签</p>
	<p id="right">带有id属性的p标签</p>
	<center>
		center标签中的元素
	</center> -->

	<!-- <p>
		Some text! Some text!
		这 是 一 段 文 字
	</p>
	<p id="zheng">
		Some text! Some text!
		这 是 一 段 文 字
	</p>
	<P id="fu">
		Some text! Some text!
		这 是 一 段 文 字
    </P> -->


    <!-- <h1>This is h1</h1>
    <h4>This is h4</h4> -->


    <!-- <h1>
    	this is h1
    	段落1
    </h1>
    <h3>
    	this is h3
    	段落3
    </h3>
    <h4>
    	this is h4
    	段落4
    </h4> -->

    <!-- <a href="#">这是一个超链接</a>
    <h4> this is h4</h4>
    <h4 id="id"> this is h4</h4>

    <p> this is      
    	 p
    	 文本处理
    </p>
    <pre> this is      
    	 p
    	 文本处理
    </pre> -->
              <!--   龙猫
        <h1>this is h1</h1> -->


        <!-- <p class="normal"> narmal文本</p>
        <p class="ita">ita文本</p>
        <p class="obl">obl文本</p> -->

       <!--  <p class="normal"> narmal文本</p>
        <p class="thin">ita文本</p>
        <p class="bold">obl文本</p> -->



        <!-- <h1>this is h1</h1>
        <p>this is p</p> -->

        <!-- <a href="http:www.baidu.com" target="_blank">百度</a>
        <a href="http://123.207.58.25/" target="_blank">比特</a> -->

        <ul>
        	<li>柠檬</li>
        	<li>西瓜</li>
        	<li>苹果</li>
        </ul>
</body>
</html>

前端——CSS（1）