子豪 之 css运用总结

css
 语法
 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
 选择器通常是您需要改变样式的 HTML 元素。
 每条声明由一个属性和一个值组成。
 属性是您希望设置的样式属性  每个属性有一个值。属性和值被冒号分开
 如果值为若干单词，则要给值加引号
 声明多个属性时，需要用分号将每个声明分隔
 选择器
 元素选择器
 html {color:black;}
 类选择器
 .a {color:red;}  标签的class值等于a 调用其样式
 ID 选择器
 .a {color:red;}  标签的id值等于a 调用其样式
 属性选择器
 *[title] {color:red;} 包含属性（title）的所有元素变为红色
 a[href][title] {color:red;} 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
 后代选择器
 h1 em {color:red;}  h1 元素后代的 em 元素的文本变为 红色
 子元素选择器
 h1 > strong {color:red;}   第一个 h1 下面的 strong 元素变为红色
 相邻兄弟选择器
 h1 + p {margin-top:50px;}  选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
 伪类选择器
 :active 向被激活的元素添加样式。
 :focus 向拥有键盘输入焦点的元素添加样式。
 :hover 当鼠标悬浮在元素上方时，向元素添加样式。
 :link 向未被访问的链接添加样式。
 :visited 向已被访问的链接添加样式。
 :first-child 向元素的第一个子元素添加样式。
 :lang 向带有指定 lang 属性的元素添加样式。
 举例
 a:link {color: #FF0000} /* 未访问的链接 */
 a:visited {color: #00FF00} /* 已访问的链接 */
 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
 a:active {color: #0000FF} /* 选定的链接 */
 伪元素选择器
 :first-letter 向文本的第一个字母添加特殊样式。
 font
 color
 background
 margin
 padding
 border
 text-decoration
 vertical-align (仅当 float 为 none 时)
 text-transform
 line-height
 float
 clear
 举例
 p:first-letter {
  color:#ff0000;
  font-size:xx-large;}
 :first-line 向文本的首行添加特殊样式。
 font
 color
 background
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
 举例
 p:first-line {
  color:#ff0000;
  font-variant:small-caps;  }
 :before 在元素之前添加内容。
 举例
 h1:before {
  content:url(logo.gif); }
 :after 在元素之后添加内容。
 举例
 h1:after {
  content:url(logo.gif); }
 选择器分组
 h1,h2,h3,h4,h5,h6 {
  color: green;  }
 继承
 子元素从父元素继承属性
 body {
     font-family: Verdana, sans-serif;  }
 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样
 样式
 背景
 background-color 设置元素的背景颜色。
 background-image 把图像设置为背景。
 background-position 设置背景图像的起始位置。
 center 中间
 top 顶部
 bottom 底部
 right  右边
 left 左边
 百分数值  50% 50%;
 长度值 50px 100px;
 background-repeat 设置背景图像是否及如何重复。
 repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，
 no-repeat 则不允许图像在任何方向上平铺
 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
 scroll 随文档滚动
 fixed 固定的不随文档滚动
 文本
 text-indent 缩进文本
 text-indent: -5px;
 text-indent: 20%;
 text-align 水平对齐
 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中
 word-spacing 字间隔
 word-spacing: 30px;
 word-spacing: -0.5em;
 letter-spacing  字母间隔


喜欢请点心哦！

总结了一些最基本的CSS基础,但不是太全面