记录学习笔记、分享资源工具、交流技术思想、提升工作效率

《head first HTML与CSS.XHTML》读书笔记2

前端 xiaomudk 6年前 (2015-08-30) 3376次浏览 0个评论

开始学习CSS

最简单的html和css结构:

<html>
<head>
    <title> </title>
    <style type="text/css">
        ……
    </style>
</head>
<body>
    ……
</body>
</html>

每个属性声明以一个分号结束!

h1, h2 {                   # 这里的h1,h2叫选择符,这里可以放多个选择符
    color: gray;            #这个样式适用选择符选择的元素
}

链接到外部样式表

创建一个css文件: test.css
内容(不需要<style></style>标记):

h1, h2 {
    color: gray;
}

在html中链接到外部样式表

<link type="text/css" rel="stylesheet" href="../test.css" />

css的继承

指我们设置上级(父级)的css样式,上级(父级)及以下的子级(下级)都具有此属性。 一般只有文字文本具有继续特性,如文字大小、文字加粗、文字颜色、字体等。

继承的覆盖

在css里,被应用的规则总是最具体的。因为,如果元素有一个规则,元素也有一个更具体的规则,那浏览器一般会执行更具体的规则。

css的注释

/*文字*/       #这个可以进行段注释

元素类:

把把元素添加到一个类中,只需添加一个类名的(如test)的class属性。
<p class="test">
创建类的选择符:

p.test {
        color: green;
}

.test {            #用一个点后接一个类名,这个规则将会适用于该类内的所有成员。
        color: green;
}

一个元素可以加入多个类
<p class="test1 test2 test3"> #每个类名之间用空格隔开,类名顺序无所谓

关于样式的应用:

  1. 如果没有选择符与元素匹配,刚依赖继承
  2. 如果没有可继承的元素,刚使用浏览器给的默认值。
  3. 如果多个选择符匹配了一个元素的同一属性(比如颜色),刚配置最具体的那个选择符,如果有多个选择符一样具体,刚匹配最后一个规则。

字体和颜色样式

  • font-family 定义网页中的字体,可定义多种,如果前一种系统中,没有则使用下一种显示

  • font-size 控制字体大小
    定义方法:px,em,百分数和关键字
    font-size: 14px; #字体大小14像素 ,尽量不要用这种方式,定义字体
    font-size: 1.2em; #字体大小为父元素字体的1.2倍
    font-size: 150%; #字体大小为父元素的150%
    font-size: small; #small一般为12像素,其余的值有: xx-small、x-small、small、medium、large、x-large、xx-large;每种字体都比前一种大20%

  • color 给文本添加颜色
    color 是字体颜色
    backgroud-color 是背景颜色
    可以用颜色名直接定义,也可以使用十六进制定义 。
    backgroud-color: red;
    backgroud-color: rgb(80%, 40%, 0%);
    backgroud-color: rgb(204, 102, 0);
    backgroud-color: #cc6600;

  • font-weight 设置字体的粗细 #可以设置为 lighter(较细)、normal(正常)、bold(粗)、bolder(更粗)

  • font-style 给字体添加样式
    italic 斜体,

  • text-decoration 给文本添加更多样式 #可设置: none、underline、overline、line-through、blink(闪动)

盒模式

  • line-height 行间距,这个也是可以继承的,在body设置后,页面所有元素都会改变
    比如 line-height: 1.6em; #字体的1.6倍

css把每个单一的元素看作一个盒子

  • 内容区:图片或一些文字

  • 补白: 盒子的内容和边框之间,补白是透明的,本身没有颜色或修饰

  • 边框: 元素周围可以有边框,是可选的边框包围着补白,边框可以有各种宽度、颜色和样式

  • 边界: 包围着边框,如果两个盒子相邻,边界就相当于它们之间的空间。和补白一样,边界也是透明的,本身没有颜色或修饰

  • border-color 设置边框颜色

  • border-width 设置边框宽度

  • border-style 设置边框样式
    可能的值

描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
  • background-color 设置元素的背景颜色

  • padding 设置补白的像素大小或边框里面部分的百分之几

比如: padding: 25px;               内容的四周为25像素的补白
       padding:10px 5px 15px 20px;  上:10px,右:2px,下:15px, 左:20px(顺时针方向)
       padding:10px 2px 15px;       上:10px,右左:5px, 下:15px
       padding:10px 5px;            上下:10px, 右左:5px

百分比的话:规定基于父元素的宽度的百分比的内边距
还有 
    padding-left         左补距离
    padding-right        右补距离
    padding-top          头顶补距离
    padding-bottom       底补距离
  • margin 设置外边距,即边界(两个盒子之间的距离)
    这个用法和padding一样,可以参考padding
  • background-image 设置背景图片
    background-image: url(images/backgroud.gif);
  • background-repeat 设置是否及如何重复背景图像
    值: repeat         默认。背景图在垂直和水平方向重复
     repeat-x         水平方向重复
     repeat-y         垂重方向重复
     no-repeat        图像只显示一次
  • background-position 设置背景图像的起始位置

    值  top left        #如果仅规定一个关键词,第二个值默认为center,如果不规定,默认为0%, 0%
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    
    x% y%       左上角为0% %;如果只规定了一个,另一个默认为50%;
    xpx ypx     左上角为0 0 ;只规定了一个,另一个默认也为50%

定义边框的一侧
border-top-color 上边框的颜色
border-top-style 上边框的样式
border-top-width 上边框的带度
top可以替换为:right,left, bottom

样式的id

id 具有唯一性, (开头不能为数字)
id的使用:

<p id="footer">this is a test!</p>

在css中规定为id属性方法:

#footer
或 p#footer

如果给多个id相同属性的话,id之间用逗号隔开

#a, #b, #c {
    color: red;
}

使用多样式表

<link type="text/css" rel="stylesheet" href="lounge1.css" />
<link type="text/css" rel="stylesheet" href="lounge2.css" />
<link type="text/css" rel="stylesheet" href="lounge3.css" />

样式表的顺序很重要,最下面的优先最高,一个样式表会覆盖在它之前链接的样式表中的样式、

div

就像一个容器,可以把元素一起放进去,div仅仅是结构,没有任何“外观”左默认样式

<div id="test">
</div>

样式:

  • width 设置元素的宽度;这个宽度只是内容区的宽度,height也是一样
  • height 设置元素的高度
  • text-align 在块元素中text-lign来设置其中文本(包括图片)的对齐方式
    可为center,left,right
    justify 这个是文字两端对齐

选中div中的特定元素

div h2 {                 #表示所有的div
    color: black;
}
或
#elixirs h2 {            #id为elixirs的div
    color: black;
}
也可以
#elixirs blockqoute h2{        #表示id为"elixirs"的元素的子孙<blockqoute>的子孙<h2>元素
    color: bulue;
}

css属性的合并

background-color: white;
background-image: url(cock.gif);
background-repeat: repeat-x;
合并为:
background: white url(cock.gif) repeat-x       (顺序无所谓)
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
合并为:
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;

span 创建一组内联字符和元素

<span class="cd">buddha bar</span>, <span class="artist">claude challe</span>

css中添加样式

.cd {
    font-style: italic;
}
.artist {
    font-weight: bold;
}

<a>元素和它的几个特征

a:link {        #未被访问的链接
    color: green;
}
a:visited {     #已被访问的链接
    color: red;
}
a:hover {       #鼠标停留在上面的链接
    color: yellow;
}
还有两个状态为 focus(聚焦,即tab键选中的时候,);active(用户第一次点击一个链接)
这两个状态一般不用,有些浏览器不能很好的支持

伪类

<a>元素的link、visited 就是伪类

层叠

css流

块元素从上往下读,默认占据浏览器窗口的整个宽度
内联元素从左往右读
两个内联元素的边界是两个元素的边界之和
两个块元素的边界是取较大元素的边界

漂移元素

漂移元素必须设置一个明确的宽度值,不能是默认的

float:left       # 让一个元素靠左或靠右
float: right
clear: right #右边不能有漂移元素,如果则把这一段往后移
clear:both

漂移元素的边界不会和块元素的边界重叠,

流动和冻结设计

冻结:内容的宽度是固定的
流动:由浏览器决定宽度,用auto来默认显示

凝胶物布局:

内容区的宽度是固定的,但边界随着浏览窗口变大或缩小

绝对布局

用属性 position 来告诉浏览器使用绝对布置

position:absolute        #绝对布局
position:static          #默认的,浏览器决定哪个元素放哪
position:fixed           #相对于浏览器边缘的绝对位置

绝对布局用z-index属性互相层叠放置,数值较大的放上面

相对布局

position:fixed #相对于浏览器边缘的绝对位置

表格

<table summary="test">        #summary,摘要,在浏览器上不显示,就像程序的注释一样
    <caption>                  #给表格添加标题
        这是一个标题
    </caption>
    <tr>                     #每个<tr> 构成一行
        <th>1</th>            #<th>构成一列的表格表头(会被加粗)
        <th>2</th>
    </tr>
    <tr>
        <td>1</td>            #每个<td>构成表单的一个单元
        <td>2</td>
    </tr>
</table>

border-spacing:1px 2px #设置单元单之间的距离,水平为1,垂直为2
border-collapse:bollapse; #取消单元格之间的距离,距离为0

占两行   #rowspan定义一个表格单元所占据的行数 
占两列   #colspan定义一个表格单元所占据的列数
li {
    list-style-type: disc;
}

设置列表的主属性,也就是列表前面的那个圆点
`list-syle-type: disc` #disc为圆点,circle为圆圈,square为方块,none为消除所有标志
也可以自定义:

li {
    list-style-image: url(images/backpack.gif);
    padding-top: 5px;
    margin-lef: 20px;
}

表单

……
表单里填写的内容: 文本框 提交按钮 单选框 复选框 密码输入框 文本区

发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址