程序员必须知道的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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181008A1ZEK600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券