CSS学习
目录：
1、CSS简介：
2、三种不同类型的CSS样式：
3、选择器：
4、练习：
5、背景属性：
6、文本属性：
7、外边距合并：
8、伪类：
9、练习2：
1、CSS简介：
答：CSS（Cascading Style Sheets，层叠样式表），为了解决内容与表现分离。样式通常存储在样式表中。外部样式表可以提高工作效率。
2、三种不同类型的CSS样式：
答：①内联样式：直接在html标签上定义该标签的CSS样式
②内部样式：写在html文件中，且包含在<style></style>代码块中
③外部样式：通过在html中引用外部css文件来控制样式
元素的优先级，就近原则，离元素最近的规则优先级最高
3、选择器：
答：（1）子元素选择器（child selector），用于不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素。
①代码示例：
Eg1：h3 > em> strong {
<span style="white-space:pre"> </span>color:red;
}
<h3>This is <strong>very</strong> <strong>very</strong> important.</h3>
<h3>This is <em>really <strong>very</strong></em> important.</h3>运行结果：
图3.1 运行结果
②代码示例：
Eg2：h3 >strong {
<span style="white-space:pre"> </span>color:red;
}
<h3>This is <strong>very</strong> <strong>very</strong> important.</h3>
<h3>This is <em>really <strong>very</strong></em> important.</h3>运行结果：
图3.2 运行结果
（2）后代选择器（descendant selector，包含选择器），可以选择作为某元素后代的元素。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“...在...找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器。
①代码示例：
Eg：ul li strong{
color:red;
font-size: 30px;
}
<ul>
<li><strong>我是邓钦艺</strong></li>
<li>邓钦艺今年大三了</li>
</ul>运行结果：
图3.3 运行结果
（3）属性选择器，可以根据元素的属性及属性值来选择元素。
①简单属性选择：希望选择有某个属性的元素，而不用管属性值是什么。
Eg：a[href]{
<span style="white-space:pre"> </span>color:red;
}②根据具体属性值选择：选择有特定属性值的元素。
Eg：a[href=“http://www.mashensoft.com”][title=“码神软件"] {
<span style="white-space:pre"> </span>color: red;
}③根据部分属性值选择，使用波浪号。
Eg：h2[class~="deng"]{
color:red;
}
<h2 class="happy deng">Remoa is happy.</h2>
<h2 class="healthy deng">Remoa is healthy.</h2>运行结果：
图3.4 运行结果
④特定属性选择类型：
Eg1：h4[lang|="en"]{
color:blue;
}<h4 lang="en">hello</h4>
<h4 lang="en glish">hello2</h4>
<h4 lang="en-us">world</h4>
<h4 lang="en-au">remoa</h4>说明：这个规则会选择lang属性等于en或以en-开头的所有元素。
运行结果：
图3.5 运行结果
Eg2：h4[lang*="en"]{
color:blue;
}<h4 lang="en">hello</h4>
<h4 lang="en glish">hello2</h4>
<h4 lang="en-us">world</h4>
<h4 lang="en-au">remoa</h4>说明：这个规则会选择lang属性包含en的值得所有元素。
运行结果：
图3.6 运行结果
⑤相邻兄弟选择器（Adjacent sibling selector），可选择紧接在另一元素后的元素，且二者有相同父元素。
Eg：h1 + p{
color:red;
}
<h1>This is the head.</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>运行结果：
图3.7 运行结果
4、练习：
Html代码：
<div id="main">
start
<div id="div1" >
<div>div1标签</div>
<p title="p1">段落1</p>
<p class="blue">段落2</p>
<p class="blue">段落3</p>
<span>横向块</span>
</div>
<div id="div2" class="blue">div2标签</div>
end
</div>练习要求：
（1）将id为div1 div2元素字体变为gold颜色。
（2）将 div1标签这个字变为红色。
（3）只将div1中的class=blue的标签和span标签变为蓝色。
（4）请将title=p1的标签字体变为2倍默认字体。
①代码示例：
#div1,#div2{
color:gold;
}
#div1 > div{
color:red;
}
p[class="blue"]{
color:blue;
}
#div1 span{
color:blue;
}
p[title="p1"]{
font-size: 2em;
}②运行结果：
图4.1 运行结果
5、背景属性：
答：①background：在一个声明中设置所有的背景属性。
②background-color：设置元素的背景颜色。
③background-position：设置背景图像的开始位置。
④background-repeat：设置是否及如何重复背景图像。Value：repeat-x（水平方向重复），repeat-y（垂直方向重复），no-repeat（不重复），repeat（垂直和水平都重复）
⑤background-image：设置元素的背景图像。
⑥background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。Value：scroll（默认，随着页面其余部分的滚动而移动）或fixed（页面其余部分滚动，背景图片不动）
6、文本属性：
答：color 设置文本的颜色。
direction 规定文本的方向 /书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 规定文本的水平对齐方式。
text-decoration 规定添加到文本的装饰效果。
text-indent 规定文本块首行的缩进。
text-shadow 规定添加到文本的阴影效果。
text-transform 控制文本的大小写。
unicode-bidi 设置文本方向。
white-space 规定如何处理元素中的空白。
word-spacing 设置单词间距。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align设置为"justify"时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
7、外边距合并：
答：①当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。
②当一个元素包含在另一个元素中时，它们的上外边距会发生合并，下外边距也会发生合并。
8、伪类：
答：①a:link：选择所有未被访问的链接。
②a:visited：选择所有已被访问的链接。
③a:hover：选择鼠标指针位于其上的链接。
④a:active：链接被点击的时刻。
a:active 必须位于 a:hover之后
a:hover 必须位于 a:link和a:visited之后
9、练习2：
实现下图所示效果：
图9.1 目标效果
HTML代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>码神管理系统</title>
<link rel="stylesheet" href="css/mycss.css" />
</head>
<body>
<!--
作者：邓钦艺
时间：2016-08-24
描述：作业
-->
<!--表头-->
<div id="header-div" >
<div id="title">
<span>
<img src="img/1.png" alt="logo"/> 码神管理系统
</span>
</div>
<div id="search">
<input type="text" placeholder="search" name="search" />
<button type="button">确定</button>
</div>
<ul id="nav">
<li><a href="#">退出</a></li>
<li><a href="#">换肤</a></li>
<li><a href="#">消息</a><li>
</ul>
</div>
<!--左边内容-->
<div id="content-div">
<ul id="content">
<li><a href="#">用户管理</a></li>
<li><a href="#">组织管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">日志管理</a></li>
</ul>
</div>
<!--底部-->
<div id="last">
<h4>码神软件|联系星哥|关于码神|合作企业|企业招新|企业声明|合作学校</h4>
<h4>码神Java六班学员：邓钦艺|2016 广州码神信息科技有限公司|</h4>
<h4>版权归 © 邓钦艺 所有</h4>
<h4>
<img src="img/bottom.png" alt="bottom's picture"/> 粤ICP备5201314号
</h4>
</div>
</body>
</html>CSS文件：
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
#nav li{
list-style-type: none;
padding-left:8px;
padding-right:10px;
float:right;
}
#title{
display:inline;
padding-left: 10px;
}
#search{
display:inline;
padding-left:45% ;
}
#nav{
float:right;
margin-top: 0;
padding-right: 60px;
}
#header-div{
padding-top:6px;
padding-bottom:6px;
padding-left: 10px;
background-color: black;
color:blue;
margin-bottom: 0;
}
#content li{
list-style-type: none;
line-height: 1.7;
}
#content a{
text-decoration: none;
}
#content-div{
padding-top: 15px;
width:200px;
background-color: #EEEEEE;
height:500px;
}
#last {
text-align: center;
background-color:#DBDBDB;
padding: 10px 0;
margin: 5px 0;
}
#last h4{
font-weight:normal;
}
a:link{
color:blue;
}
a:active{
color:red;
}
a:visited{
color:#00FF00;
}
a:hover{
background-color: aqua;
color:yellow;
}运行结果：
图9.2 实现效果
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
