- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用。
- 除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 HTML 标签作为 CSS 修饰所用的选择器。如: h3{color:red;}
- 当样式需要应用于很多页面时,外部样式表将是理想的选择。
样式表应该以 .CSS 扩展名进行保存。
- <style> 标签在文档头部定义内部样式表
- background-color 属性定义了元素的背景颜色。默认值为transparent(透明)
- background-image 属性描述了元素的背景图像.默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。
- 对背景图像进行平铺,可以使用 background-repeat 属性。
- 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
- 如果你不想让图像平铺,你可以使用 background-repeat 属性
- 可以利用 background-position 属性改变图像在背景中的位置:
- background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center;其次,可以使用长度值,如 100px 或 5cm;最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
- Text Color颜色属性被用来设置文字的颜色。
- 文本可居中或对齐到左或右,两端对齐.当 text-align设置为justify,每一行被展开为宽度相等,左,右外边距是对齐
- text-decoration属性用来设置或删除文本的装饰。从设计的角度看 text-decoration 属性主要是用来删除链接的下划线。
- 文本缩进属性是用来指定文本的第一行的缩进。CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。
- word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal与设置值为 0 是一样的。
- color设置文本颜色
- direct 设置文本方向
- letter-spacing设置字符间距
- line-height 设置行高
- text-align对齐元素中的文本
- text-decoration向文本添加修饰
- text-indent 缩进元素中文本的首行
- text-shadow 设置文本阴影
- text-transform控制元素中的字母
- unicode-bidi设置或返回文本是否被重写
- vertical-align设置元素的垂直对齐
- white-space设置元素中空白的处理方式
- word-spacing设置字间距
- a:hover 必须跟在a:link 和 a:visited 后面
- a:active 必须跟在 a:hover 后面
- text-decoration 属性主要用于删除链接中的下划线
- list-style-type 属性指定列表项标记的类型是
- 利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。
- 为了显示一个表的单个边框,使用 border-collapse属性。
- 双边框为border
- border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
- width 和height 属性定义表格的宽度和高度。
- 如果在表的内容中控制空格之间的边框,应使用 td 和 th 元素的填充属性用padding
- 最终元素的总宽度计算公式是这样的:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 元素的总高度最终计算公式是这样的:总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
- 通过 border-width 属性为边框指定宽度。
- Padding(填充)属性定义元素边框与元素内容之间的空间
- padding 属性的百分比数值是相对于其父元素的 width 计算的,如果改变了父元素的 width,则它们也会改变
- padding:25px 50px 75px 100px;
- 为上右下左
- display 属性设置一个元素应如何显示,visibility 属性指定一个元素应可见还是隐藏。
- visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间
- display:none 可以隐藏某个元素,且隐藏的元素不会占用任何空间。
- 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非事先设定 position 属性。
- static 定位的元素不会受到 top, bottom, left, right 影响。
- fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
- relative 定位元素的定位是相对其正常位置。它原本所占的空间不会改变
- absolute 定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于 <html>
- CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。
- 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素
- 块元素可以把左,右页边距设置为"自动"对齐。使用margin:auto