Day3-CSS入门：CSS引入及选择器

表单标签

form标签(表单标签),是一个包含表单元素的区域,用于定义表单要提交的地址和提交的范围
    重要属性
        action:设置表单要提交的地址,默认提交到当前页面
        method:设置表单提交的方式(默认是get方式)
            get:将数据拼接到地址栏的后面,以名称和值的方式成对拼接,相对的不安全,只能提交少量数据
            post:将数据拼接到请求体中,相对的安全,可以提交大量数据,主要用于文件上传,或者提交一些敏感数据
​
input标签(输入项标签),根据type属性值的不同,显示不同的样式,方便用户输入或者选择
    重要属性
        type
            text    文本框
            password 密码框
            radio  单选框
            checkbox 复选框
            file    文件框
            submit  提交按钮(将页面数据提交到后台)
            reset   重置按钮(恢复页面刚打开时候的效果)
            button  普通按钮(将来会结合js一起使用)
        checked
            checked  设置单选和复选默认选中(布尔属性)
​
select标签(下拉选择框标签),如果取值是固定的几个,可以考虑使用下拉选择框
    option 子标签,定义下拉选择框的选项
​
        重要属性
        selected
            selected 设置下拉选择框默认选中(布尔属性)
​
textarea标签(文本域标签)  主要用于输入大段文本,比如个人简介,商品评价
    重要属性
        cols 列数(宽度,以平均字符宽度计)
        rows 行数(高度)
​
通用属性
    name
        表单项中的内容要想提交到后台,必须要有name属性
        还可以为单选和复选框进行分组,同一组的单选框,一次只能选择一个
​
    value
        对于单选和复选,需要指定value属性的值,用于在后台区分用户到底选择了哪个选项
        设置submit,reset,button上面默认文字
        可以设置下拉框中option标签的值,设置之后提交到后台使用的就是value里面的值,否则使用的就是option标签体的值

表格标签

table 定义表格
    border 边框(取值为1,有边框)
    width 宽度
    height 高度
    align  规定表格相对周围元素的对齐方式
    cellpadding 规定单元边沿与其内容之间的空白
    cellspacing 规定单元格之间的空白
​
tr  定义表格中的行(table row)
    align 定义表格行的内容对齐方式
​
td 定义行中的单元格(table data)
    colspan 跨列
    rowspan 跨行
th 定义表头(table head) 
    本质是在td的基础上加粗并且居中

CSS概念及入门

简介

层叠样式表,用于设置样式,布局控制(主流的布局方式:div+css)

组成

选择器
    用于选择页面中的元素,进行控制样式
属性
    用于设置样式,布局控制

区别

和html属性控制样式的区别
    1,css控制样式更加专业,可以实现html属性实现不了的效果
    2,可以实现标签和样式的分离,提高样式的重用性,提交开发效率

CSS引入方式

行内样式

概念
    使用style属性,直接在html标签上添加样式,也叫内联样式
特点
    简单,耦合性强,不利于代码和样式的分离,没有复用性

内部样式

概念
    使用style标签,结合css选择器,给元素添加样式,一般写在head里面
特点
    实现了html代码和样式的分类,可以在当前页面进行复用

外部样式

概念
	将css样式抽取到一个css文件中,然后通过link标签,在页面中引入
特点
	实现了html代码和样式的分类,可以在多个页面进行复用,可以统一网站的风格

三种引入优先级

行内样式优先级最高,因为它只为这一行服务
内部样式和外部样式优先级一样的,谁最后解析,显示谁

CSS基本选择器

ID 选择器

概念
	通过元素的唯一标识符（ID）选择 HTML 元素,一般选择的是页面中唯一一个元素
语法
    #id值

类选择器

概念
	通过类别名称选择具有特定类别的 HTML 元素,一般选择的是一批元素(最常用)
语法
	.class属性值

元素选择器

概念
	通过元素名称选择 HTML 元素,一般选择的是一批元素
语法
	标签名

基本选择器优先级

行内样式 > id选择器 > 类选择器 > 元素选择器
结论:越是具体的优先级越高,越是通用模糊的优先级越低

CSS扩展选择器

并集选择器

作用
	选择多个符合条件的元素
语法
	选择器a,选择器b

交集选择器

作用
	选取既满足条件一,又满足条件二的元素
语法
	选择器a选择器b

后代选择器

作用
	选择某一个元素下符合条件的后代元素
语法
	选择器a 选择器b

子代选择器

作用
	选择某一个元素下符合条件的子代元素
语法
	选择器a>选择器b

相邻兄弟选择器

作用
	选择某一个元素相邻的下一个元素
语法
	选择器a+选择器b

属性选择器

作用
	通过元素的属性来选择元素
语法
	[属性名=属性值]

伪类选择器

概念
	用来添加一些选择器的特殊效果。(不想要使用标签自带的属性,就可以完成)
语法
	a:link {color:#FF0000;} /* 未访问的链接 */
    a:visited {color:#00FF00;} /* 已访问的链接 */
    a:hover {color:#FF00FF;} /* 鼠标划过链接 */
    a:active {color:#0000FF;} /* 已选中的链接 */

伪类结构选择器

概念
	不需要在html中添加额外的属性(id,class),直接根据元素在html中的结构关系来选择元素
区别
	普通选择器:在html结构中有属性:比如id选择器,类选择器,都需要给标签添加额外的属性
	伪类选择器:在html结构中没有标识,根据逻辑上的关系来选择元素
语法
	选择一个
		:first-child
		:last-child
		:nth-child(n)
	选择多个
		n可以是一个数字
			从1开始,代表第n个元素
		n可以是一个关键字
			odd奇数  even偶数
		n可以是一个公式
			an+ b描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量
			2n+1 奇数
			2n 偶数
			-n+3 前3个
			n+4 第四个以后