CSS学习

来源：互联网发布：人工智能会毁灭人类编辑：程序博客网时间：2024/06/06 21:04

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>版权归 &copy 邓钦艺 所有</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 实现效果

6 0