HTML+CSS学习笔记 05

一.CSS的特性

1.1 CSS属性的继承

CSS的有些属性是可以被继承的,何谓继承?
- 一个元素如果没有设置某个属性,而这个属性恰好也是可以被继承的话,就会采用父元素的值
- 当然,一个元素自己设置了属性的值,就用自己的(不管是手动设置的,还是用户代理帮我们设置的)
- 比如,color,文本,字体之类的全都都是可以被继承的
- 究竟哪些属性可以被继承,哪些属性又是不可以被继承,不用死记硬背,用到时直接去查官方文档就可以了
- 可以用inherit强制继承某个属性
- 浏览器的开发者工具也会标识出哪些属性是继承过来的

1.2 继承的注意点

css继承的是属性的计算值而不是代码中书写的原始值

1.3 层叠

css允许将多个相同属性的css属性层叠到同一个元素中
但是最终只有一个css属性会生效
至于哪一个会生效,取决于改样式的优先级

1.4 优先级(权重)

1.4.1 按照经验,为了方便比较css属性的优先级,可以给css属性所处的环境定义一个权值(权重):

!important : 10000
内联样式: 1000
id选择器: 100
类选择器/伪类选择器/属性选择器: 10
元素选择器/伪元素选择器: 1
通配符选择器: 0

1.4.2 比较严谨的比较方法是:

从权重最大的开始比较,每一种权值的数量的多少,数量多的则优先级高,即可结束比较
如果数量相同,则继续比较权重较小的,比较规则同上
如果所有权值比较完毕之后仍相等,则后面写的优先级高,会层叠掉前面的

/*如果以下两条样式是作用到一个元素的color属性的,那么最终元素的color的值是?*/
.five#radio .one #three {  /*2个id,两个类*/
    color:blue;
}
#box #btn .five div span { /* 两个id,1个类*/
    color:black;
}


/*所以,上面的样式的优先级高,元素最终呈现蓝色*/

1.4.3 CSS属性使用的经验

为什么有时自己书写的css属性不生效,可能是由于以下的原因:
- 选择器的优先级较低
- 选择器没有选中对应的元素
- css的使用形式不对
  - 元素不支持该CSS属性,如:span元素不支持设置width和height
  - 浏览器不识别此该属性
  - 被同类型的css属性所覆盖,如font覆盖了font-size

1.4.4 经验:

充分利用浏览器的开发者工具进行调试,查错

二 HTML中的其他比较重要的元素

2.1 列表元素

HTML中提供了三种形式的列表:有序列表(ol/li),无序列表(ul/li),定义列表(dl/dt/dd)

2.1.1 有序列表----------- ol/li

ol : 有序列表,其直接子元素只能是li元素
li: 列表中的每一项

2.1.2 无序列表----------- ul/li

ul : 无序列表,其直接子元素只能是li元素
li: 列表中的每一项

2.1.3 定义列表 ---------- dl/dt/dd

dl: 定义列表,其直接子元素只能是dt,dd
dt: 列表中每一项的项目名
- 1个dt跟着一个或者多个dd
dd: 列表中每一项的描述,是对dt的描述和补充

2.1.4 列表相关的CSS属性

列表相关的常见CSS属性有4个：list-style-type、list-style-image、list-style-position、list-style

它们都可以继承，所以设置给ol、ul元素，默认也会应用到li元素

list-style-type:可以设置li元素前面标记的样式
- disc（实心圆）、circle（空心圆）、square（实心方块）
- decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）
- lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
- none（什么也没有）
list-style-image:设置某张图片为li元素前面的标记,会覆盖list-style-type
list-style-position: 设置li元素标记的位置,取值有: outside和inside两个值
list-style: 是list-style-type,list-style-image,list-style-position的缩写形式(这三者是没有顺序区别的)

p {
    list-style: outside url('../../img/abc.png');
}

注意: 一般最常用的还是list-style:none去除li前面的默认样式

2.2 表格元素

2.2.1 表格的常用元素

table: 表格
tr: 表中的行
td: 行中的单元格

2.2.2 table的常用属性

border	边框的宽度
cellpadding	单元格的内部的间距
cellspacing	单元格外部的间距
width	表格的宽度
align	表格的水平对齐方式:left,center,right

2.2.3 tr,th,td的常用属性

valign	单元格的垂直对齐方式:top,bottom,middle,baseline
align	单元格的水平对齐方式:left center,right
width	单元格的宽度
height	单元格的高度
rowspan	单元格可横跨的行数
colspan	单元格可横跨的列数

2.2.4 细线表格的实现

table {
    border-collapse:collapse;
}

2.2.5 表格的其他元素

元素名	解释
tbody	表格的主体
caption	表格的标题
thead	表格的表头
tfoot	表头的页脚
th	表格的表头单元格

2.2.6 单元格的合并

合并要领:
- 合并方向是向右,向下
- 删掉被覆盖的td元素

2.2.7 CSS属性 -------- border-spacing

border-spacing :用于设置单元格之间的水平,垂直距离(给table设置的)

table {
    border-spacing:10px 20px;
}

设置两个值分别是单元格水平间距和垂直间距'
设置一个值则是代表同时设置水平间距和垂直间距

2.3 表单元素

2.3.1 常用的元素

form
- 表单
- 一般的,所有表单相关的元素都是它的后代元素
input
- 单行文本输入框
- 单选框
- 复选框
- 按钮
textarea
- 多行文本输入框
select,option
- 下拉选择框
button
- 按钮
label
- 配合for属性一起使用,目的是选择文字也可以选中相关表单元素
fieldset
- 表单元素组
- 通常和legend元素一起搭配使用
legend
- 表单元素组的标题
- 通常和fieldset元素一起搭配使用

2.3.2 input的常用属性

type: input的类型
- text: 单行文本输入框,(明文输入)默认值
- password: 单行文本输入框(密文输入)
- radio: 单选
- checkbox: 复选
- button: 按钮
- reset: 重置按钮
- submit: 提交表单数据给服务器
- file: 上传文件
maxlength: 允许输入的最大长度的字符
placeholder: 用户未输入数据时的占位文字
readonly: 表明此iunput是只读的
disabled: 禁用
checked:: 默认被选中(只适用于radio或者checkbox类型的input)
autofocus: 页面加载时,input元素自动聚焦
name: 用于表单提交时,传给服务的键名
value: 取值

2.3.3 input的布尔属性

布尔属性可以没有属性值,只写属性名就可以了
常见的布尔属性有: disabled, checked,selected,autofocus等等等等
如果要给布尔属性设值,其值就和属性名是一样的

<!--  以下两种写法是等价的,但是推荐第一种-->
<input disabled autofocus >
<input type="radio" checked autofocus>

<!-- 有效,但是不推荐-->
<input disabled="disabled" autofocus="autofucus">
<input type="radio" checked="checked" autofocus="autofocus">

2.3.4 input实现的按钮

普通按钮(type=button): 普通按钮,使用value属性来设置文字
重置按钮(type=reset) : 重置表单元素的值
提交按钮(type=submit) :将表单上的数据提交给服务器

<!-- 1.普通按钮 -->
<input type="button" value="普通按钮">

<!-- 2.重置按钮 -->
<input type="reset" value="重置按钮">

<!-- 1.提交按钮 -->
<input type="submit" value="注册">

2.3.5 button元素实现的按钮

使用button元素也能实现按钮,功能效果和input一样

<!-- 1.普通按钮 -->
<button type="button">普通按钮</button>

<!-- 2.重置按钮 -->
<button type="reset">重置按钮</button>

<!-- 1.提交按钮 -->
<button type="submit">提交按钮,也是默认类型</button>

2.3.6 input和label结合使用

label元素一般与input元素一起使用,用来表示input的标题
label通过for属性可以与input的id值绑定,可以通过label来激活in0put

<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">

2.3.7 radio使用的注意事项

name值相同的radio元素才具有单选功能

<span>性别:</span>
<label for="male">男</label>
<input type="radio" checked id="male" name="sex">
<label for="female">女</label>
<input type="radio" checked id="female" name="sex">

2.3.8 checkbox的使用注意

使用checkbox时,多个checkbox的name一定要相同

<span>爱好</span>
<label for="apple">苹果</label>
<input type="checkbox" checked id="apple" name="hobbies">

<label for="banna">香蕉</label>
<input type="checkbox" checked id="banna" name="hobbies">

<label for="orange">橘子</label>
<input type="checkbox" checked id="orange" name="hobbies">

2.3.9 去除input/a元素的tab建的选中效果

添加css样式

input {
    outline:none;
}
a {
    outline:none;
}

或者将tabindex值设为-1
- ```
<input type="radio" tabindex=-1>
```

2.3.10 textarea的相关属性

cols:列数
rows:行数
resize: 缩放的相关设置
- 禁止缩放: resize:none;
- 水平缩放: resize: horizontal;
- 垂直缩放: resize:vertical;
- 水平垂直缩放: resize: both; (这是默认值)

2.3.11 select和option

option为select的唯一子元素,一个option代表下拉框的一个选项

<select id="edu" name="education">
    <option value="0">小学</option>
    <option value="1" selected>初中</option>
    <option value="2">高中</option>
    <option value="3">大学</option>
</select>

select的常用属性
- multiple: 表示多选
- size: 下拉框显示多少项
option的常用属性
- selected: 默认被选中

2.3.12 form的相关属性

action: 表单数据要提交的地址
method: 请求方法
- get
  - 在发送给服务器的URL后以query的方式传参数,参数用&隔开,比如:http://www.baidu.com/abc/asdf/index.php?username=123&phone=10086;
  - 由于浏览器和服务器对于URL的长度有限制,通常不能超过1kb,所以不能发送数据过大的http请求
  - 由于参数在浏览器地址栏可以看到,所以get请求也是不安全的
- post
  - 发给服务器的参数放在请求体中去,相对于get请求来说,安全性较高
  - 理论上,post请求对于数据量没有限制,所以比较适合数据量较大的请求(具体还要看服务器的处理能力)
target: 打开URL的方式(参考a元素的target)
enctype:规定了表单向服务器发送数据前如何对数据进行编码,有以下几种编码方式
- application/x-www-form-urlencoded：默认的编码方式
- multipart/form-data：文件上传时必须为这个值，并且method必须是post
- text/plain：普通文本传输
accept-charset：规定表单提交时使用的字符编码（默认值UNKNOWN，和文档相同的编码）