css备忘录

css引入方式

1 外部引入:在html的head部分
<link rel="stylesheet" type="text/css" href="css文件路径">
2 头部引入:在head部分加入
<style>css代码写在这里</style>
3 标签引入:直接写在页面标签里
<div style="background:red;width:200px"></div>
4 @import url()引入:属于css2,不常用,不能用dom控制 ie5不支持
link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面

css选择器

1 标签选择器:直接使用html标签作为选择器,一般用来设置默认属性或者和后代选择器一起使用
2 类选择器:.classname{}
特点:可以给不同标签设置同一个类来添加样式,减少代码量,方便修改等
命名规范:第一个字符不能使用数字,尽量参考大神们的国际标准命名
3 id选择器:#idname{}id具有唯一性
4 层级选择器:如.xxx span img{} 后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。
5 分组选择器:如.xxx,span,img{} 实际上是对css的一种简化写法,是把具有相同css样式的不同选择器放在一起,减少代码量
6 通配选择器:* 很少用
7 伪类选择器:

css选择器中的属性顺序

显示属性:display list-style position float clear
自身属性:width height margin padding border background
文本属性:color font text-decoration text-align vertical-align white-space content
符合浏览器的渲染顺序,最终达到提高执行效率的目的

css优先级

标签内嵌样式>头部书写样式>外部引用样式>浏览器默认样式
css选择器的优先级:id>class>标签选择器
id=100 class=10 标签选择器=1
!important:在css属性后面标明具有最高的优先级 不能被覆盖

盒模型

完整的盒模型是由content border padding margin 四部分组成

a标签的4个伪类

link 未被访问前的样式表属性
visited 链接地址已被访问过的样式表属性
hover 鼠标悬停时的样式表属性
active 鼠标点击未释放时发生的事件
: 伪类
:: 伪元素

标签语意化

1 明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,
网页上的文章的标题就得用标题标签,网页上的各个栏目的栏目名称也可
以使用标题标签
2 语义话的作用:更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。

one

—html基本结构

<html>
<head></head>
<body></body>
</html>

—标签

html 根标签
head(title script link style meta base)
title元素可定义文档的标题
title标签是head标签中唯一要求包含的东西
为自己的每个文档都认真地选择一个描述性的、实用的并与上下文独立的标题
body
—标题标签
h1-h6
-段落
p
-em strong
em 表示强调,strong 表示更强烈的强调
-div span
-锚点连接 a 超连接
href属性
title属性
target属性

-img图片 为网页插入图片
src 图像的位置
title 鼠标划过图片时显示的文本
alt 指定图像的描述性文本,当图像不可见时,可看到该属性指定的文本
q 短文本引用
blockquote 长文本引用
br 换行标签
hr 分割线标签
address 为页面加入地址信息 双标签 样式为斜体
code 单行代码
pre 多行代码

-列表
无序列表 ul li
有序列表 ol li
自定义列表 dl dt dd

-表格
table tbody这个标签基本不用了
tr 表格的一行
th 表格表头
td 表格的一个单元格
caption 表格标题
summary属性,表格的摘要<table summary='由xxx提供'></table>
-表单
from
action属性,输入的数据被传送到的地址,比如一个php页面(test.php)
method属性 数据传送方式(get/post)
input 输入框 text password
name 为文本框命名,以备后台程序ASP,PHP使用
value 为文本输入框设置默认值(提示作用)
单选框 radio
复选框 checkbox
value 提交数据到服务器的值
name 为控件命名,以备后台程序ASP,PHP使用
checkbox 当设置checked或checked="checked"时,该选项被默认选中
注意:同一组的单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的作用
submit 提交
reset
hidden
button
label为input元素定义标注
label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上
标签的for属性应当与相关元素的id属性相同
<label for="momo"></label>
<input type="radio" name="sex" id="momo"/>
for属性可把label绑定到另为一个元素。请吧for属性的值设置为相关元素的id属性的值
-texrarea 文本域
cols:多行输入域的列数
rows:多行输入域的行数
select 下拉列表框
multiple属性 可以实现多选功能
option 下拉选项

未完待续