css笔记

目录

a元素的伪类 访问过，未访问过

伪元素选择器

样式的继承（继承祖先的资产）

表格

表格样式

表单

input属性补充

---

a元素的伪类 访问过，未访问过

1.：link 用来表示未访问过的链接
2.：visited:用来表示访问过的链接
由于隐私的原因：所以visited只能改颜色
注意：：link：visited这两个伪类是超链接独有的
3.：hover 用来表示鼠标移入的状态
4.：active鼠标点击后的状态
注意：hover：active是所有标签共有的伪类

伪元素选择器

：：first-letter 表示第一个字母
：：first-line表示第一行
：：selection 选中的内容
：：before 元素的开始位置
：：after 元素的结束位置
before和after必须结合content使用

样式的继承（继承祖先的资产）

定义：为一个元素设置的样式，同时也会应用到它的后代元素上
优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式
注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承

样式冲突  通过不同的选择器选中同一个元素，进行一样的样式设定
发生样式冲突时，应该用哪一个样式由选择器的权重（优先级）决定

选择器权重
内联样式               1000
id选择器                100
class选择器             10
属性选择器               10
元素选择器                1
通配选择器                0
继承样式                   没有权重
......
注意：
1.对比选择器权重的时候，如果是交集选择器的话，需要将所有选择器权重相加，最终谁高用谁
2.对比选择器权重的时候，如果是并集选择器的话，单独计算选择器权重，谁高听谁的
3.对比选择器权重的时候，如果选择器权重是相同的话，谁靠下，用谁的
4.对比选择器权重的时候，累加的选择器权重，最高不会超过上一级
5.！important 最高的优先级 慎用
如果样式没有生效，可用来检测是否是选择器权重
再者一般用来修改插件的样式

表格

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
    表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
 在网页中也可以来创建出不同的表格。
 1、在HTML中，使用table标签来创建一个表格
 2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr
 3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
 4、border="1" width="40%" align="center"
 5、rowspan  合并行单元格
 6、colspan  合并列单元格

表格样式

设置边框线  border：边框线大小 边框线样式 边框线的颜色
       border: 1px solid red;
设置文本水平居中效果 
        text-align: center;
设置文本垂直居中效果 
        vertical-align:middle;
设置单线边框 以下两种方法必须设置在table样式里 
         border-spacing:0px ; 
        border-collapse:collapse;
如果设置了边框合并，则border-spacing自动失效
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果

长表格
有一些情况下表格是非常的长的，
    这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：的中间

如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr

表单

将用户信息等本地的数据信息提交给服务器
比如：百度的搜索框 注册 登录这些操作都需要填写表单
1:创建表单  form标签
    属性：
    action属性（必须要写）
    指向的是一个服务器的地址，当我们提交表单时将会表单相关的数据提交到action属性对应的地址    
2:添加表单项
使用form创建的仅仅是一个空白的表单，
我们还需要向form中添加不同的表单项
(1)input来创建一个文本框，
type属性：text
name属性：提交内容的名字
如果希望表单项中的数据会提交到服务器中，必须指定一个name属性        
value属性值：作为文本框的默认值显示
就是用户输入的内容，也就是要提交给服务器的值
(2)input创建一个密码框
type属性值:password
name属性：提交密码的名字
(3)input创建一个单选按钮
type属性：radio
name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择
value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器        
checked属性  默认选中  可以直接添加属性，不写属性值
(4)input创建一个多选框
type属性:checkbox
checked属性  默认选中
(5)select来创建一个下拉列表
name属性设置给select，
value属性设置给option
selected属性设置给option，将选项设置为默认选中
在下拉列表中使用option标签来创建一个一个列表项
(6)textarea创建一个文本域
name属性  提交给服务器的名字
cols属性  设置宽度
rows属性  设置高度
(7)input创建一个提交按钮，点击后表单就会提交
type属性值：submit
value属性：指定按钮上的文字,默认是提交
(8)创建一个重置按钮，type="reset" 
点击重置按钮以后表单中内容将会恢复为默认值
(9)创建一个单纯的按钮，
这个按钮没有任何功能，只能被点击
<input type="button" value="按钮" />
(10)button标签来创建按钮
也可以用type属性来更改button的类型，例如submit、reset、button
方式和使用input类似，它是成对出现的标签，使用起来更加的灵活
<button type="reset">重置</button>

input属性补充

        1: autocomplete="off"  关闭自动补全
        2: readonly 设置为只读，不能修改
        3: disabled 设置为禁用
        4: autofocus  自动获取焦点
        5: placeholder 表单提示内容