编写CSS样式:
注释/*....*/
<标签 style="CSS样式"></标签>
写在head里面<head><style>.{Css样式}</style></head>
文件引用,<link rel="stylesheet" href="CSS文件路径">
选择器:
- ID选择器
- #ID{Css样式}
- <div ID="ID"></div>
- Class选择器
- .ID{CSS样式}
- <div Class="ID">...</div>
- 标签选择器
- 标签{CSS样式}
- <div>...</div>
- 层级选择器
- #ID(.Class) .#ID(.class) 标签{样式}
- <标签 id="id"(class="class")><标签>...<标签></标签>
- 组合选择器
- #ID,.id,#id,标签{CSS样式}
- 属性选择器
- input[type="text"]{CSS样式}
- <input type="text"/>
样式:
height:高度
width:宽度
line-height:水平方向根据标签高度据中
color:颜色
font-size:字体大小
font-weight:字体加粗
float:让标签浮起来,块级标签可以堆叠。
dispaly:none让标签消失
dispaly:inline块级标签转换为行内标签
dispaly:block行内标签转换为块级标签
dispaly:inline-block行内块元素
说明:行内标签无法设置高度,宽度,边距
margin:top,left,bottom,right 外边距(如果是两个参数,第一个参数表示topt bottom 第二个参数表示left right margin:0 auto 上下为0,左右距中)
padding:上,左,下,右 内边距
postion:层
- absolute+relative:结合使用。生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
- fixed:top..px bottom..px left..px right..固定在窗口的某一位置。生成绝对定位的元素,相对于浏览器窗口进行定位。
- static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- inherit:规定应该从父元素继承 position 属性的值。
z-index:层级顺序
overflow:hide隐藏超出范围部分,auot超出范围出现滚动条
background-color:设置背景颜色
background-image:url(图片路径)默认DIV大小,重复图片