程序员必须知道的css样式

from标签

css选择器

css盒子模型

from标签action method

表单项标签

input：可以通过type属性，改变元素展示样式

label：指定输入项的文字描述信息

label的for属性和input的id对应。

text：文本输入框，默认

placeholder：提示信息

password：密码输入框

placeholder：提示信息

radio：单选框

1只有多个选项的name属性名一致时候才会实现这几个选项单选

2一般会给每个单选框提供value

3checked：默认选中

checkbox：复选框

1.一般需要给每个复选框提供value

2checked：默认选中

checked：默认选中

file：文件选择

hidden：隐藏域

submit:提交按钮

button:普通按钮

image：图片提交按钮

select下拉列表，需要name，提交时候才可以接收

option子元素指定选项，selected是默认选中

textarea文本域，指定name提交时候可以被接收

属性cols，rows，设置列和行数，

CSS入门（层叠样式表）页面美化和布局

CascadingStyle Sheets

好处：功能强大，将内容与样式控制分离，降低耦合度，解耦，让分工协作更容易

html与css的结合方式

1内联样式：标签内使用style属性指定css代码

2内部样式：head内定义style标签

3外部样式：定义css资源文件，head内定义link标签，引入外部css资源文件

注意：123种范围越来越大，2和3常用，

选择器：

基础选择器：

id选择器：#id

元素选择器：标签名称 id选择器高于元素选择器

类选择器： .类名 类选择器高于元素选择器

扩展选择器：

*表示选择所有元素

并集选择器：选择器1，选择器2{}

子选择器：选择器1 选择器2{} 选择器1下的选择器2的内容

父选择器：选择器1>选择器2{} 筛选选择器2的父元素

属性选择器：元素名称[属性名=“属性值”]{}

伪类选择器：元素：状态{}

a:link{}

a:hover{}

a:active{}

a:visited{}

属性

字体、文本

font-size：字体大小

color：文本颜色

text-align：对其方式

line-height：行高

背景

background：

边框

border：设置边框，符合属性

尺寸

width：宽度

height：高度

盒子模型：控制布局

margin：外边距

padding：内边距

默认情况下内边距会影响整个盒子的大小

box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

float：浮动left right