css基础

css

样式的三种方式

• 在标签内

<div style="color: red; font-size: 12px;">hello,word</div>

• 在内部样式表

<style>
 div {
 color: red;
 font-size: 12px;
 }
</style>

• 引用外部

<link rel="stylesheet" href="css文件路径">

三者权重：加！import-->在标签内-->在内部样式表-->引用外部

基础选择器

• 标签选择器

span {

属性:值;

}

• 类选择器

.class{

属性:值;

}

#多类名
<div class="a b"></div>

• id 选择器

#id {

属性:值;

}

• 通配符选择器(所有)

• {

属性:值;

}

复合选择器

• 后代选择器 空格分

• 子选择器 选择 元素 里面所有最近一级 p 标签元素

• 并集选择器 逗号分

• 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

1. hover鼠标经过

2. :focus 伪类选择器用于选取获得焦点的表单元素。

3. :first-child 子代

字体属性

Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

属性值	表示	注意点
font-family	字体
font-size	字号大小	单位px
font-weight	字体的粗细	normal:不加粗=400，bold:加粗=700，100-900
font-style	文本的风格
font	font-style font-weight font-size/line-height font-family;	不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性

文本属性

属性值	表示	注意点
color	文本颜色	十六进制 或颜色单词
text-align	文本对齐	可以设定水平对齐的方式
text-indent	文本缩进	通常两字体，2em
text-decoration	文本修饰	添加下划线underline，取消下划线none，上划线overline删除线line-through
line-height	行高

背景

属性值	表示	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position分别是x和y坐标
background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定)
背景简写	咧	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置：
背景半透明	颜色半透明	background:rgba(0.0,0.0.3)；后面必须是4个值

盒子模型

边框

属性值	值
border-width
border-style	1.none：没有边框即忽略所有边框的宽度（默认值）2.solid：边框为单实线(最为常用的)3.dashed：边框为虚线 4.dotted：边框为点线
border-color	颜色
border-collapse	collapse合并
border-radius	圆角
### 内边距
padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

外边距

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度（width）。

2. 盒子左右的外边距都设置为 auto 。

.header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以：

3. margin-left: auto; margin-right: auto;

4. margin: auto;

5. margin: 0 auto;

盒子阴影

box-shadow:

属性值	表示
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选，将外部阴影（0utse1)改为内部阴影。

文字阴影

tetx-shadow:

属性值	表示
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
color	可选。阴影的颜色。

浮动（float)

值 none 不浮动 left 左 right右

浮动特性

1. 浮动元素会脱离标准流(脱标)

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内块元素的特性.

清除浮动

值 clear left right both

1. 清除浮动的本质是清除浮动元素造成的影响

2. 如果父盒子本身有高度，则不需要清除浮动

3. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

定位

定位 = 定位模式 + 边偏移 。

特性：

1. 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

position

1. static 静态

2. relative 相对

3. absolute 绝对

4. fixed 固定

粘性定位 sticky

5. 以浏览器的可视窗口为参照点移动元素（固定定位特点）

6. 粘性定位占有原先的位置（相对定位特点）

7. 必须添加 top 、left、right、bottom 其中一个才有效

边偏移

定位叠放次序 z-index

• 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

• 如果属性值相同，则按照书写顺序，后来居上

• 数字后面不能加单位

• 只有定位的盒子才有 z-index 属性

元素的显示隐藏

1. display 显示隐藏 none/dlock

2. visibility 显示隐藏 visible/hidden

3. overflow 溢出显示隐藏

属性值	表示
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

html5 input

属性值	表示
type-"email"	限制用户输入必须为Email类型
type-"url"	限制用户输入必须为URL类型
type-"date"	限制用户输入必须为日期类型
type-"time"	限制用户输入必须为时间类型
type-"month"	限制用户输入必须为月类型
type-"week"	限制用户输入必须为周类型
type-"number"	限制用户输入必须为数字类型
type="tel"	手机号码
type-"search"	搜索框
type="color"	生成一个颜色选择表单

表单

属性值	值	说明
required	required	必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前糖入过的值，应该显示出在字中填写的选项。默认已经打开，如autocomplete="on”，关闭autocomplete ="off"需要放在表单内，同时加上name 属性，同时成功提交
multiple	multiple	可以多选文件提交