css 笔记
css
一.css基本语法结构：
h1（选择器）{（声明）font-size(属性）:12px（值）;}
二：css样式分：行内样式、内部样式、外部样式（连接式外部样式
和导入式外部样式）
1.行内样式：
<h1 >你好</h1>
2.内部样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{color: red;} </style> </head> <body> <h1>你好</h1> </body> </html>
3.（1）导入式：html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import url( "style.css" ) ; </style> </head> <body> <h1>你好</h1> </body> </html>
css部分：h1{ color: red;}
（2）链接式：html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"type="text/css"> </head> <body> <h1>你好</h1> </body> </html>
css部分：h1{ color: red;}
三.css选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三种基本选择器的优先级</title>
<style type="text/css">
p{
font-size: 14px;
color: red;
}
h1{ color: blue; }
.h1{color: pink; }
#h1{ color: green; }
</style>
</head>
<body>
<h1 class="h1" id="h1">北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p></body></html>
1.类选择器：html中<h1 class=“h1" ></h1>，css中 .h1{color：red；}表示
2.标签选择器：html中：
<p>北京欢迎你，有梦想谁都了不起！</p>
css中：
<style> p{font-size:12px} </style>，
-
id选择器：
css中：#h1{color:red;}html为：<h1 id="h1">北京欢迎你</h1>
四.高级选择器：
1.层次选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
p,ul{border: 1px solid red; /*边框属性*/ }
*/ /*后代选择器*/ /*
body
p{ background: red; }
*/ /*子选择器*/ /*
</ body>
p{background: pink;}
*/ /*/!*相邻兄弟选择器*!/*/ /*
.active + p{ background: green;}
/*/!*通用选择器*!/*/
.active~p{background: yellow;}
</style>
</head>
<body>
<p class="active">1</p>
<!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</body>
</html>
（1）后代选择器：E F，F为E的后代
（2）子代选择器：E>F，F为E的子元素
（3）相邻兄弟选择器：E+F,为同辈元素，F在E元素之后且相邻，有
同一个父元素
（4）通用兄弟选择器：E~F，选择某元素后面的所有兄弟元素，且 在同一个父辈元素中，为同辈元素
2.属性选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3属性选择器的使用</title>
<style type="text/css">
/*此段代码只是让结构更美观，后续会详细讲解*/
.demo a { float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/* /*存在属性id的元素*/ /*
a[id] { background: yellow; }
*/ /*/!*属性id=first的元素*!/*/ /*
a[id=first] { background: red;}
/*/!*属性class="links"的元素*!/*/ /*
a[class="links"] { background: red; }
*/ /*/!*属性class里包含links字符串的元素*!/*/ /*
a[class*=links] { background: red; }
*/ /*/!*属性href里以http开头的元素*!/*/ /*
a[href^=http] { background: red; }
*/ /* <!-- !*!!*属性href里以png结尾的元素*!!*! !*
a[href$=png] { background: red;}
</style
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
<a href="" class="links active item" title="test website" target="_blank" >2</a>
<a href="sites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image.jpg" class="links item">5</a>
<a href="efc" class="links item" title="website link">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abcdef.doc" class="links item">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a></p>
</body>
</html，
（1）
a[id] {background: red;},
（2）
a[id=first] {background: red;}
（3）
a[class*=links] {background: red;}
（4）
a[href^=http] {background: red;},
（5）
a[href$=http] {background: red;},
五.css文本样式：
1.字体属性：font: italic bold 12px "宋体"；
（1）字体类型：font-family,如：font-family：“隶书”;
（2）字体大小：font-size ,如：font-size ：12px;
（3）字体风格：font-style ,如：font-style ：italic;
（4）字体大小：font-weight ，如：font-weight：bold;
设置字体类型时，若有英文，先设置英文再设置中文，字体类型 可设 置多个，从左往右，只要能识别到一个就行，否则依次向 后识别
2.span标签：用于组合html文档中的行内元素，例：
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>致辞页面</title> </head> <body> <h1>致辞</h1> <hr/> <p> <img src="image/icon.jpg" alt="高管团队" width="176px" height="108px" /> <span>课工场</span>——更可靠的IT就业教育 始源于<span>北京大学</span>优秀校办企业，拥有<span>19年</span>企业历史，培养超过<span>85万</span>IT行业精英的.....。
<p>
汇聚企业领袖、行业一线大咖、技术大牛及顶尖学府名师，面向大学生及适龄人群，通过<span>课程</span>、<span>师资</span>、<span>教材</span>、<span>平台</span>及<span>服务</span>全方位支撑，提供专业、贴近目标人群的产品及服务，满足人群对就业教育产品的挑剔和高需求，
保证学员就业效果。 目前课工场筛选青鸟体系内致力于大学生市场的实力雄厚的校区，在全国核心城市建设课工场校区，学员已经超过<span>5万</span>人。
</p>
<p>
课工场自主研发的学习平台已经稳定运行<span>7年</span>，学员利用课工场网站，APP等学习端进行学习，将预习和复习放到线上，成为线下学习的必要补充；老师可以利用平台进行直播、录播授课，在线测试，在线实验，
将整个学练评测的过程放在线上，丰富了教学手段。同时，平台利用累积多年20多亿条学员学习行为大数据，实现学员个性化学习，提升学员学习效率，为学员最终高效完成学业获得就业机会提供重要支持
</p>
</body>
</html>
3.文本样式：
color 文本颜色：color：#00c；
text-align 水平对齐：text-align ：right/center/left;
text-indent 首行文本缩进：text-indent：10px；
line-height 行高：line-height：30px；
文本装饰：text-decoration：underline/none/overline/line- through;（下划线、无、上划线、删除线）
（1）文本阴影：text-shadow: 5px 5px 2px red;依次为x 轴，y轴， 模糊半径，颜色.
(2) 垂直对齐：vertical-align:middle;
六.超链接和列表样式：
1.超链接伪类：a: hover{color: red;},设置顺序为：a:link(点击 前)-a: visited(点击后)-a: hover(悬浮时)-a:active(点击时).
2.列表样式：
(1) list-style-type: none; 无标记符号
disc; 实心圆
circle; 空心圆
square; 实心正方形
decimal; 数字
(2) list-style: 如：li{list-style: none;}祛除li中的圆点
七. div标签及背景样式：
-
div标签为块级元素
-
背景样式：background: red url("../image/..") 10px 20px no-repeat; 依次为 ： 背景颜色，图片，x轴位置,y轴位置，不平铺
-
浙公网安备 33010602011771号