Head First Html and CSS学习笔记之CSS

时间：2022-09-20 16:39:05

第七章 CSS入门

　　元素的许多属性都可以设置样式，太多了，记不住，可以参考《CSS Pocket Reference》。

外部样式表，<link type = "text/css" rel = "stylesheet" href = "lounge.css">

CSS包含一些简单的语句，称之为规则。典型的规则包括一个选择器，以及一个或者多个属性和值。选择器将制定规则将应用于哪些元素。记住，每个属性声明要以分号结束。

可以使用元素名来做选择器。

　　可以通过逗号分隔元素名，可以一次选择多个元素。

很多属性都可以继承，比如<body>元素设置了一个可以继承的属性，那么<body>的所有子元素都会继承这个属性。某些CSS是可以继承的，而某些是不行的，总的来说，如果样式会影响你的文本外观，那么它就是可以继承的。当然也可以覆盖这个继承到的属性。

杂烩汤:

CSS样式

背景色 background-color

文本色 color

设置边框 border  1px 粗细为1像素  solid 实线  {border-bottom : 1px solid black;}

字体设置 {font-family : sans-serif;}

left 左边间距

font-weight 设置文本粗细 可以设置粗体

top 控制元素顶部的位置

font-style 设置斜体  {font-style : italic;}

list-style 改变列表的外观

background-img 在元素后面放置一个图片

padding 内边距

font-size 文本字体大小

text-align 文本左对齐 右对齐 居中等

line-height 行间距

letter-spacing  在字母之间设置间距

为类xxx设定样式 .xxx{}

如果希望属于类xxx的p元素设定css样式：<p class = “xxx”>    p.xxx{   }

W3C验证CSS  http://jigsaw.w3.org/css-validator

第八章 增加字体和颜色样式

　　五大字体 serif   sans-serif   monospace  fanasty cursive，没个字体系列都包含大量的字体。

　　sans-serif：没有衬线，与serif比，更适合在计算机上显示。

　　serif：有衬线，新闻报纸的文字排版。

　　monospace：字体固定宽度，适合显示代码。

　　curisive和fantasy：比较有趣的字体。

Sans-serif字体系列：Verdana,  Arial Black, Trebuchet MS, Arial, Geneva

Serif字体系列：　　  Times, Times New Roman, Georgia

Monosapce字体系列：Courier, Courier New, Andale, Mono

Fantasy字体系列：　　LAST NINJA,  Impact

Cursive字体系列：　　Comic Sans， Appe chancery

　 通常制定font-family需要一个候选字体列表,如下：

{font-family： Verdana, Geneva, Arial, sans-serif;}  指定字体的大小写需要注意，最后一个通常是通用字体系列名。

　增加web字体，可以了用@font-face规则，而且这个规则最好放在body规则之上：

　@font-face {

　　　font-family: "Emblema One";  //font名字

　　　src: url("..../EmblemaOne-Regular.woff"),

url("..../EmblemaOne-Regular.ttf");

}

可以使用google的字体托管服务

杂烩汤：

Text-decoration 文本装饰 比如下划线 删除线 上划线  {text-decoration: underline | override | line-through | noe}

Font-style 控制字体比如倾斜等，字体倾斜和文本倾斜 {font-style ： italic | oblique}
-->italic斜体文本倾斜，另外衬线还有弯曲.但是不是所有的字体都会支持斜体风格也就是italic,所以此时得到的其实就是倾斜文本oblique,oblique也是倾斜的,但是他不是使用一组专门设计的倾斜字符,只是浏览器将正常的文字倾斜,单纯的倾斜了而已。

Font-family : 指定字体系列

Font-size : 120%  1.2em

Font-weight : 设置字体粗细 {font-weight: lighter | normal | bold | bolder}
关键字指定字体大小 ： xx-small, x-small, small, medium, large, x-large和xx-large    大多数浏览器中 samll默认是12px

指定web颜色
-->{background-color ： rgb(80%,40%,0%);}代表红绿蓝各占得百分比
-->{background-color ： rgb(204,102,0);} 255的80%就是204  255的40%就是102  255的0%就是0
-->{background-color ： #cc6600;} 十六进制显示的方法，这里可以简写为#c60 ,但是如果是#cc6601就不可以简写
-->{background-color ： siliver;} 按名指定颜色，但是css只有16中基本颜色以及150种扩展颜色可以采用这种方法 

我们改如何指定字体大小呢，有个小技巧：
选择一个关键字(推荐small或者medium),指定他为body规则中的字体的大小，这相当于页面的默认字体大小
然后使用em或者百分比,相对于body的大小为其他元素指定字体大小

第九章 盒模型

　　Head First Html and CSS学习笔记之CSS

　　使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:

<link rel="stylesheet" href="corperate.css">//总公司样式

<link rel="stylesheet" href="beverage-division.css">//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式

<link rel="stylesheet" href="lounge-seattle.css">//西雅图休闲室对样式表做了自己的调整

　　简写中字体简写稍微复杂一点，如下：

font : font-style font-variant font-weight font-size/line-height font-family

font的属性中font-size必须有

font-size前的属性是可选的，组合任意，不过必须出现在font-size之前

line-height是可选的，只要在font-size后加/然后指定行高即可

font-family名之间要使用逗号分隔

如: font : small/.6em Verdana, Helvetica, Arial,sans-serif;

font-variant ： normal | samall-caps | inherit;
-->所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

媒体查询

　　1:link媒体查询

　　你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如

<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">　　#制定了有屏幕的设备并且宽度不超过480像素

<link rel="stylesheet" href="lounge-print.css" media="print">　　#指定了打印机才能用

# 其他属性包括min-device-width,max-device-width,orientation(横向landscape,纵向portrait)

2:CSS媒体查询

可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如:

@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用

　　#guarantee {

  　　margin-right: 250px;

　　}

}

@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用

 　　#guarantee {

   　　margin-right: 30px;

 　　}

}

@media print { // 如果要打印页面，使用该规则

　　body {

  　　font-family: Times, "Times New Roman", serif;

　　}

}

-->如果CSS文件很大的话，还是建议使用link元素进行媒体查询。

-->可以使用max-width和min-width指定浏览器的大小，他们表示浏览器窗口本身的最大和最小宽度，而不是屏幕。

杂烩汤：

padding 给内容四周加上一样的内边距

padding-left ： 左边距…
-->{padding : 10px 10px 10px 10px;}表示上，右，下，左的内边距各位10px(顺时针) 可以简写为 {padding ： 10px;}  或者 {padding :10px 10px;}

margin  内容四周加上外边距

background-image 属性用途非常特定，他只是用来设置一个元素的背景图像，只是为了让这个元素更具有吸引力，不可以取代<img>
-->url(images/background.gif); 不需要加引号

background-repeat ： no-repeat | repeat-x | repeat-y | inherit;  
background-position : top left |top center |top right |center left |center center |center right |bottom left |bottom center |bottom right;
-->还可以使用%来表示，左上角是0% 0%，右下角是100% 100%
-->还可以使用xpos ypos来表示，左上角是0 0;
-->如果只是指定一个关键字，另外一个默认是center
元素的背景会在内容区和内边距下显示,但是不会延伸到外边距。

border-style 设置边框样式 共计8种  包括实线  虚线 脊线 槽线

{

　　solid 实线

　　dotted 虚线

　　inset 内凹

　　outset外凸

　　dashed 破折线

　　double 两条线

　　groove 槽线

　　ridge 脊线

　　border-width 边框宽度(也可以使用thin,medium,thick等关键字来设置)

　　border-color 边框颜色

　　指定边框其中一边 比如 border-top-style , border-top-color , border-top-width
　　border-radius 创建圆角 比如 {border-top-left-radius : 3em;}
} 
Id和class的区别 Id是唯一的 不允许多个元素有一样的id 虽然可以指定元素有唯一id，但是不妨碍这个元素加入多个class。 

list-style 列表的主要属性是list-style-type,利用这个属性可以控制列表中使用的项目符号这个
-->无序列表: disc | circle | squre | none
-->有序列表：decimal,十进制 | upper-alpha,大写字母 | lower-alpha,小写字母 | upper-roman,大写罗马数字 | lower-roman,小写罗马数字
-->可以定制
li{ 
　　 list-style-image: url(images/backpack.gif); 
    padding-top: 5px;
    margin-left: 20px; 
 }

list-style-position : inside 标记在列表项里 | outside 列表项外

第十章 div和span

　　div 块元素容器

　　在属于一个逻辑区的元素周围放置<div>开始和结束标记;

　　div中的元素也会从div继承一些属性(如font-size,color等);

　　可以用div为页面增加更多结构，进一步展示页面的底层逻辑结构，但不要为了加结构而不必要地增加结构，在完成任务的前提下让结构尽可能简单;

　　你也可以嵌套结构，例如可以把cats,dogs的<div>放在一个pets <div>中,如:

<div class="pets">

<div class="cats">...</div>

<div class="dogs">...</div>

</div>

　　span 内联元素容器　

  <ul>

    <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>

    <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>

    <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>

    <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>

    <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>

  </ul>

　

Head First Html and CSS学习笔记之CSS

　　伪类 pesudo-class:

　　a元素可能同时处于多个状态，一般认为适当的顺序是link,visited,hover,focus,active

　　-->foucs是指浏览器将焦点放在你的链接上时就是焦点状态，浏览器允许用户按下tab键轮流访问时，浏览器访问到某个链接，某个链接就拥有了"焦点"。

　　-->active是指用户第一次单击一个链接时，就处于活动状态。

　　-->伪类不止能处理链接，还能对其他类型的元素提供处理，如first-child对应元素的第一个子元素。

a:link {

  color: green;

}

a:visited {

  color: red;

}

a:hover {

  color: yellow;

}

　　

　　层叠:给定一组样式，浏览器是按照层叠的方式来确定使用哪一个样式

　　-->读者可以在他的css属性上加上!important，那他就能覆盖你的样式

　　-->浏览器会用多个样式表组织样式，首先是你的ccs所有样式表，其次是用户创建的样式，最后浏览器本身会维护一组默认样式

　　-->浏览器需要选择最特定的规则进行显示,特定性由3个数开始000,如下

　　【选择器包含id则+1】 | 【选择器若包含类或者伪类则+1】|【选择器包含元素名+1】
　　 如 h1.blue 为 0 1 1，#expert 为1 0 0  所以100 > 011

杂烩汤：

width 允许改变内容区的宽度

text-align 对内联元素对齐，但是记住只能在块元素上设置 单独对内联元素使用是无效的

line-height 如果直接设置数值为1  说明是自己字体大小的一倍  而不是一个相对量

float ： right  浮动属性  浮动至右侧

 第十一章 布局和定位

　　float流体布局(liquid layouts)，块元素从上往下流入，内联元素从左往右流入，

　　-->对于内联元素定位时，它们会考虑浮动元素的边界，因此会绕着浮动元素。

　　-->缺点是无法创建两个相同高度的列，可能还需要移动html的div ，需要其他的设计.

#amazing { width: 200px; float: right; }

　　当元素流入页面时，在这个元素左边，右边或两边不允许有浮动内容,例如为防止页脚和右边栏重叠，可以用clear设置:

#footer {

background-color: #675c47;

color:            #efe5d0;

text-align:       center;

padding:          15px;

margin:           10px;

font-size:        90%;

clear:            right;

}

　　流体与冻结设计 : 冻结布局(frozen layouts),冻结布局会锁定元素，如将body中的所有内容都放到一个id为#allcontent的div中

　　-->如下，页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间　

#allcontent {

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

}

　　凝胶布局（Jello layouts）:凝胶布局会锁定页面中内容区的宽度，不过会将它在浏览器中居中，将内容区的外边距设为auto即可，浏览器会确定正确的外边距是多少，确保左和右外边距相同，所以内容会居中,如下所示:

#allcontent {

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color: #675c47;

margin-left: auto;

margin-right: auto;

}

　　

　　绝对定位(absolute):它会从流中删除并根据制定的top，left，right或bottom属性定位,由于边栏在流之外，其他元素甚至不知道有这样一个元素，它们会将它完全忽略,所以clear元素不管用了。

　　-->关于绝对定位还有一个分层放置的问题，一个元素可以放在另一个绝对定位元素上面，那如何分层？谁在上面？每个定位元素都有一个z-index的属性（越靠近”你，z-index更大).

　　-->可以对任何元素指定绝对位置

　　-->position的默认值为static，将元素放在正常的文档流中。position共有4个值:static,absolute,fixed和relative。fixed将元素放在相对于浏览器窗口（区别页面）的一个位置上，固定元素永远不会移动。relative让元素正常流入页面，不过在页面上显示之前要进行偏移。

　　-->绝对元素不必像浮动元素一样指定宽度，不过默认会占浏览器的整个宽度，所以如果要改变这种行为就要设置width属性

　　-->指定元素位置还可以用百分数,相对于浏览器宽度.

#sidebar {

  position: absolute;

  top:  100px;

  right:  200px;

  width:  280px;

}

　　css表格:例如一行两列的表格可以按如下方式创建：

<div id="tableContainer">

<div id="tableRow">

  <div id="main">

    ...

  </div>

  <div id="sidebar">

    ...

  </div>

</div>

</div>

　　对应的CSS如下:

#tableContainer {

display: table;

border-spacing: 10px;//于是不再需要div中的外边距  边框间距

}

#tableRow {

display: table-row;

}

#main {

display: table-cell;

background:       #efe5d0 url(images/background.gif) top left;

font-size:        105%;

padding:          15px;

vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom

}

#sidebar {

display: table-cell;

background:       #efe5d0 url(images/background.gif) bottom right;

font-size:        105%;

padding:          15px;

vertical-align: top;

}

-->注意:上面的border-spacing会在单元格之间增加10像素空间，另外在边界周围也会增加10像素空间，但是border-spacing和外边距创建的空间不会折叠！就会导致页眉和页脚与两列之间有20像素的空间，如何修正？将页眉（页脚）的下边距（上边距）设为0即可。

杂烩汤:

固定定位布局fixed:即使滚动页面 这个位置也不会移动{position: fixed;}

Clear元素 不允许内容流动进来 但是使用绝对定位的时候不能使用

Vertical-align 表格的垂直对齐可以分为 top bottom middle

Position ： relative;  相对位置  相对正常流入的相对位置

 第十二章 HTML5标记

　　杂烩汤:

Html5新增元素：

Nav  作为导航菜单

Header  footer
-->也可以为article,section,aside增加header元素
--><footer> © 2012, Starbuzz Coffee <br> All trademarks and registered trademarks appearing on this site are the property of their respective owners. </footer>

Article  文章

Section  区块
--><section id="drinks">  </section>

Time 增加一个日期

--><time datetime="2012-02-18">2/18/2012</time>


ul 无序列表注意点:

要改成横向排列 ul li {display ： inline；}

Video 加载视频 :  <video controls autoplay width = "512" height = "288">

Controls : 加载视频控件，具体控件格式有具体浏览器指定  也可以指定统一的样式

Autoplay  加载后就自动播放

记住要自定width和height！！！

浏览器不一定支持.mp4格式 所以指定多种格式 <source src = “xxxxx”>

Poster 如果去掉自动播放的属性 使用poster指定视频开始前的海报
width,height设置视频显示区，海报会缩放到指定宽度和高度，视频会保持宽高比，有多余则显示黑边
loop 属性，布尔属性，决定视频结束后哦是否自动重新开始播放视频
preload用来细粒度地控制视频如何加载，实现优化。大多数情况下，浏览器根据autoplay和用户带宽决定加载多少视频，可以覆盖这种设置。preload取值:
-->none,则用户播放视频之前不加载视频
-->metadata，下载视频元数据
-->auto,让浏览器做决定
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"> 指定视频格式,为浏览器提供帮助。
如果你喜欢flash可以把flash放到<object>...</object>控件中，并放到source标记下面，如果浏览器不认识video元素，就会使用flash视频。


MP4容器  包含H.264视频和AAC音频

WebM容器 包含VP8视频和Vorbis音频

Ogg容器 Theora视频和Vorbis音频

Html5额外新增元素:

Mark元素：突出显示一些文本

Audio 在页面中包含声音内容

Progress 显示进度

Meter 显示一个范围内的度量 比如一个0到212的温度计

Canvas 显示用javascript绘制的图像和动画

Figure 显示类似照片 图标 甚至代码清单等独立的内容

 第十三章 表格与更多列表

　　表格:table

　　用<table>标记开始一个表格，一行用<tr>开始,每个<th>分别是某一列的表头,表头是前后排列的。每个<td>元素包含表格中的一个单元格。例子是一个3行5列的表格:

<table>
　　<caption>
　　　　增加标题<caption>...</caption>, 放在<table>元素之下,<tr>元素之上（即使你后面要用css把它显示在下方）,默认会显示在表格上方。  caption-side : bottom;
　　</caption>

  <tr>

    <th>City</th>

    <th>Date</th>

    <th>Temperature</th>

    <th>Altitude</th>

    <th>Population</th>

    <th>Diner Rating</th>

  </tr>

  <tr>

    <td>Walla Walla, WA</td>

    <td>June 15th</td>

    <td>75</td>

    <td>1,204 ft</td>

    <td>29,686</td>

    <td>4/5</td>

  </tr>

  <tr>

    <td>Magic City, ID</td>

    <td>June 25th</td>

    <td>74</td>

    <td>5,312 ft</td>

    <td>50</td>

    <td>3/5</td>

  </tr>

</table>

//添加css

table {

    margin-left: 20px;

    margin-right: 20px;

    border: thin solid black;

    caption-side: bottom;//将标题放在底部

}

td, th {

    border: thin dotted gray;

    padding: 5px;

}

caption {

    font-style: italic;

    padding-top: 8px;

}

　　nth-child 伪类:

　　nth-child伪类是一种更高级地选择元素的方法，例如让偶数段落有红色背景，奇数段落有绿色背景:

  p:nth-child(even){

    background-color: red;

  }

  p:nth-child(odd){

    background-color: green;

  }


　p:nth-child(2n){

    background-color: red;

  }

  p:nth-child(2n+1){

    background-color: green;

  } 




　　合并单元格


　　就是说有的单元格要跨越多行，可以使用rowspan属性，指定一个数据单元格占多少行，然后从这个单元格所跨越的其他行中删除相应的表格元素。表格元素还能跨多列，只要为td元素增加colspan属性，然后指定列数，跨多列时需要删除同一行中的表格数据元素，例如：




<tr>

  <td rowspan="2">Truth or Consequences, NM</td>

  <td class="center">August 9th</td>

  <td class="center">93</td>

  <td rowspan="2" class="right">4,242 ft</td>

  <td rowspan="2" class="right">7,289</td>

  <td class="center">5/5</td>

</tr>

<tr>

  <td class="center">August 27th</td>

  <td class="center">98</td>

  <td class="center">4/5</td>

</tr>




　　嵌套表格


　　表格里可以嵌套表格,只需要把另一个table元素放在一个td中，例如:




<tr>

  <td class="center">August 27th</td>

  <td class="center">98</td>

  <td class="center">

    <table>

      <tr>

        <th>Tess</th>

        <td>5/5</td>

      </tr>

      <tr>

        <th>Tony</th>

        <td>4/5</td>

      </tr>

    </table>

  </td>

</tr>




　　默认情况下每个单元格都有边框，会形成双线，分散注意力，可以如下修改：


　　border-collapse: collapse;或者border-spacing : 0px;


 第十四章 表单


　　表单form


　　action属性包含web服务器的url, method属性确定表单数据如何发送到服务器，如POST,另外input 是内联元素




<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">

  <p>Just type:<br>

    First name: <input type="text" name="firstname" value=""><br>

    Last name:  <input type="text" name="lastname" value=""><br>

    <input type="submit" value = "order now">　　#value可以改变默认的名字

  </p>

</form>




Head First Html and CSS学习笔记之CSS






<input type="text" name="fullname"> 文本输入  大多数表单元素都需要有个name，服务器会用到
<input type="password" name="secret">  输入的文本会加掩码
<input type="submit"> 提交输入

<input type="checkbox" name = "spice" value = "Salt">　　复选框输入 相关的复选框有同哟个名字 但是有不同的值
<input type="checkbox" name = "spice" value = "Pepper">
<input type="checkbox" name = "spice" value = "Garlic">

<input type="radio" id="whole_beantype" name="beantype" value="whole">　　单选钮输入

<input type="radio" id="ground_beantype" name="beantype" value="ground" checked>


<input type="file" name="doc">  创建一个文件输入控件,使用这个元素的前提是必须使用POST方法


<textarea name="comments" rows="10" cols="48"></textarea> 创建一个多行的文本区，如果文本在文本区中放不下，右边还会出现一个滚动条，非空元素 
-->rows 告诉浏览器文本区高度为多少字符,cols属性告诉浏览器文本区宽度为多少字符。


 <select name="characters" multiple>　　多选菜单

  <option value="Buckaroo">Buckaroo Banzai</option>

  <option value="Tommy">Perfect Tommy</option>

  <option value="penny">Penny Priddy</option>

  <option value="Jersey">New Jersey</option>

  <option value="John">John Parker</option>

</select>


 <input type="text" placeholder="Buckaroo Banzai">   placeholder为填写表单的人提供提示, 比正常内容浅一些


 <input type="text" placeholder="Buckaroo Banzai" required>  required可用于任何表单控件, 指示一个域是必要的,如果没有指定值, 就无法正常提交表单

更多HTML5表单控件输入:


<input type="number" min="0" max="20">  数字输入，可以限定输入范围
<input type="range" min="0" max="20" step="5">  类似number，显示滑动条,step指定步长
<input type="color"> 单击是弹出颜色选择器
<input type="date">  弹出日期选择器
<input type="email"> 会得到一个方便输入email的定制键盘
<input type="tel"> 与email类似
<input type="url"> 和email tel类似




应该用<label>元素来标记那些标签，label元素可以提供页面结构的更多的信息，使你能更容易地使用css对标签设置样式，另外对于有视力障碍的人，也有助于他们使用的屏幕阅读器更准确地标识表单元素要使用表单元素必须为表单元素增加一个id属性，然后增加一个label，设置其for属性为相应的id。例如:






<input type="radio" id="whole_beantype" name="beantype" value="whole">

<label for="whole_beantype">Whole bean</label><br>

<input type="radio" id="ground_beantype" name="beantype" value="ground" checked>

<label for="ground_beantype">Ground</label>






杂烩汤:




dl,dt,dd 定义列表

每一项都由一个定义术语和定义描述组成
< dl>< /dl>用来创建一个普通的列表,
< dt>< /dt>用来创建列表中的上层项目，
< dd>< /dd>用来创建列表中最下层项目，
< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间

  <dl>

    <dt>Burma Shave Sign...</dt>

      <dd>Road signs common in the US</dd>

    <dt>Route 66</dt>

      <dd>Most famous road in the U.S. highway system</dd>

  </dl>





 附录:其他


　　伪元素(pseudo-element)和伪类类似:




p:first-letter:{　　　　/*段落元素文本的第一个字母*/

    font-size: 3em;

}

p:first-line{　　　　/*段落元素文本的第一行*/

    font-style: italic;

}




选择器


　　




属性选择器,根据属性值来选择元素
img[width]{...}  会选择heml中所有包含width属性的图像
img[height = "300"]{...} 选择height伪300的图像
img[alt~ = "flowers"]{...} alt属性我"flowers"的所有图像

按兄弟选择器
h1+p{...}  选择一个紧跟h1元素的段落

结合选择器
.bluerry p{...}
div#hreentea > blockquote p : first_line{...} 




　　开发商特定的CSS属性




-moz-transform  (moz 开发商标识符 标识Mozilla  transform是属性)




　　CSS变换和过渡




<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS Transforms and Transitions</title>

    <style>

        #box{

            position: absolute;

            top: 100px;

            left: 100px;

            width: 200px;

            height: 200px;

            background-color: red;

            transition: transform 2s; <!--旋转的过程在2s内完成-->

        }

        #box:hover{

            transform: rotate(45deg);

            -webkit-transform: rotate(45deg); /* Safari, Chrome, mobile Safari, and Android */

            -moz-transform: rotate(45deg); /* Firefox */

            -o-transform: rotate(45deg); /* Opera */

            -ms-transform: rotate(45deg); /* IE 9 */

        }

    </style>

</head>

<body>

    <div id="box"> </div>

</body>

</html>




　　音频<audio>和<video>很类似




<audio src = "song.mp3" id = "boombox" controls>

    sorrybut audio is not supported in your browser.

</audio>

同样的，音频目前也没有统一的标准编码，主要有MP3,WAV和Ogg Vorbis


														
		
Head First Html and CSS学习笔记之CSS的更多相关文章
	

    

  1. 
HTML&plus;CSS学习笔记 &lpar;7&rpar; - CSS样式基本知识
		
    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
    
		
    2. 
						
  2. 
HTML&plus;CSS学习笔记 &lpar;12&rpar; - CSS布局模型
		
    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
    
		
    3. 
						
  3. 
CSS学习笔记02 CSS选择器
		
    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
    
		
    4. 
						
  4. 
CSS学习笔记01 CSS简介
		
    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
    
		
    5. 
						
  5. 
DIV&plus;CSS学习笔记（CSS）
		
    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
    
		
    6. 
								
  6. 
HTML&plus;CSS学习笔记 &lpar;13&rpar; - CSS代码缩写，占用更少的带宽
		
    标签:HTML+CSS 盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在m ...
    
		
    7. 
						
  7. 
HTML&plus;CSS学习笔记 &lpar;15&rpar; - css样式设置小技巧
		
    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
    
		
    8. 
						
  8. 
HTML&plus;CSS学习笔记 &lpar;11&rpar; - CSS盒模型
		
    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
    
		
    9. 
						
  9. 
HTML&plus;CSS学习笔记 &lpar;10&rpar; - CSS格式化排版
		
    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
    
		
    10. 
		


随机推荐
	

    

  1. 
js总结1
			
    
			
    2. 
						
  2. 
UIButton属性
			
    1.UIButton状态: UIControlStateNormal          // 正常状态    UIControlStateHighlighted     // 高亮状态    UICo ...
    
			
    3. 
						
  3. 
ASP&period;NET MVC 学习第一天
			
    今天开始第一天学习asp.net mvc,写的不是很好,高手不要喷,希望大家能一起进步学习. 好了,开始学习 新建项目,选择mvc 4应用程序 接下来选择基本,视图引擎当然要选择Razor,如果在选择 ...
    
			
    4. 
						
  4. 
小团队开发管理工具：gitlab&plus;redmine&plus;testlink&plus;jenkins
			
    由于工作需要,需要为团队搭建一个高效可用的开发管理平台.现在可用的开发管理工具很多开源的.商业的,网上也有很多博客和文章.经过2周的学习比较,再结合自己的项目特点,最后选定工具集:gitlab+red ...
    
			
    5. 
						
  5. 
Eclipse不能自动编译 java文件的解决方案
			
    前段时间出现了eclipse 不自动编译java文件的问题,在网上找了好长时间,总算把问题解决了,现在把这个问题的解决方法总结一下. 1,看看project -- Build Automaticall ...
    
			
    6. 
						
  6. 
java操作csv文件之javacsv&period;jar应用
			
    csv文件是分隔文件,如果使用java的io流来写,比较麻烦,这里为大家提供一个javacsv的jar包,这个很方便操作csv文件. 下载地址:https://pan.baidu.com/s/1i46 ...
    
			
    7. 
						
  7. 
WPF Bug清单之（13）——应该出现却没有出现的ListView水平滚动条
			
    转载地址:http://www.cnblogs.com/nankezhishi/archive/2010/03/17/wpfbug13.html 我们知道ListView在内容超出控件本身范围时,默认 ...
    
			
    8. 
						
  8. 
RS100项目进展更新
			
    1. 添加手机界面访问网页,毕竟PDA的屏幕大小和PC机大小不一致,完成了一自适应网页,便于在手机上观看实时画面: 2. 此项目为一个远程视频监控+远程开关项目,远程PC机或者手机能操作到监控端的开关 ...
    
			
    9. 
						
  9. 
基于Spring的异步系统实现方案
			
    一般的实现方案 发送异步消息所使用的工具类: import java.util.Date; import javax.jms.Destination; import javax.jms.JMSExce ...
    
			
    10. 
						
  10. 
详解Java中对象的软、弱和虚引用的区别
			
    对于大部分的对象而言,程序里会有一个引用变量来引用该对象,这是最常见的引用方法.除此之外,java.lang.ref包下还提供了3个类:SoftReference.WeakReference和Phan ...
    
			
    11. 
			
相关文章