css 基础总结

css样式学习


一. 位置和布局
1. 相对定位：relative
用途： 就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调.
特性： 不脱离标准文本流,真实位置是在老家,只不过影子出去了,可以到处飘.
移动: 可以用left,right来描述盒子右,左的移动，可以用top,bottom来描述盒子的下,上的移动.
position:relative;
left:20px;

2. 绝对定位：absolute
用途： 脱离标准文档流的.所以,所有的标准文档流的性质,绝对定位之后都不遵守了.
特性： 绝对定位之后,标签就不区分所谓的行内元素,块级元素了,不需要display:block;就可以设置宽高了
绝对定位的盒子居中：绝对定位之后,所有标准流的规则,都不适用了.所以margin:0 auto;失效.
非常简单,当做公式记一下来.就是left:50%;margin-left:负的宽度的一半.

position:absolute;
left:100px;
top:150px;

3. 固定定位：fixed
用途： 就是相对浏览器窗口定位.页面如何滚动,这个盒子显示的位置不变.
position:fixed;
left:5px;
top:5px;

4. 如何处理溢出的元素内容
overflow: scroll/hidden/auto; 使用滚动条显示/隐藏/交给浏览器自动处理

5. 在文本中垂直排列图象。
vertical-align:text-top/text-bottom; 文本在图像上部/底部

6. 元素重叠Z-index
z-index:-1 默认为0，-1在默认元素的下面

7. 水平对齐
margin:可通过将左和右外边距设置为 "auto"，来对齐块元素。
提示：如果宽度是 100%，则对齐没有效果。
margin-left:auto;
margin-right:auto;
width:70%;
8. 左右对齐
position:使用绝对定位,来左右对齐
position:absolute;
right:0px;
width:300px;
或使用 float 属性来进行左和右对齐：
float:right;
width:300px;
background-color:#b0e0e6;



二. 文本
1. 字符间距（默认为0或normal ）
letter-spacing: 20px   单位：px/em/rem

2. 行间距
line-height: 90% 一般浏览器默认110%-120%
line-height: 2 一般浏览器默认为1
line-height: 10px 一般浏览器为20px

3. 文本对齐
text-align: center/left/right/<center> /justify  
提示： <CENTER> 不仅影响文本，还会把整个元素居中。
提示： justify  两端对齐：文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等

4. 文本修饰
text-decoration: none/overline/line-through/underline/blink 不装饰文本/上划线/中间线/下划线/文本闪烁

5. 缩进文本（段落间的缩进）
text-indent: 1cm

6. 文本不换行
white-space: nowrap

7. 单词的缩进（默认为0或normal ）
word-spacing: 10px;

8. 字符转换
text-transform ：none/uppercase/lowercase/capitalize 不变换/全部大写字符/全部小写字符/首字符大写








三. 颜色
1. 背景色
background-color: yellow
background-color: #00ff00
background-color: rgb(250,0,255)
background-color: transparent 继承父对象的背景色
2. 文本颜色
color:red
color:#00ff00
color:rgb(0,0,255)






四. 背景图片
1. 背景图片
background-image:url(/i/eg_bg_04.gif)

2. 背景图片平铺
background-repeat: repeat/repeat-y/repeat-x/no-repeat  平铺/竖直平铺/水平平铺/不平铺（仅显示一次）

3. 使用%来定位背景图像
background-position: 30% 20%;

4. 使用像素来定位背景图像
background-position: 50px 100px;

5. 图像固定不滚动
background-attachment:fixed

6. 


五. 字体
1. 设置字体尺寸
font-size: 300%

2. 设置字体
font-family:"Times New Roman",Georgia,Serif

3. 设置字体风格
font-style:normal

4. 设置字体异形
font-variant: normal


六. 边框
1. 边框样式
border-style: dotted/dashed/solid/double/ridge/inset/outset/groove

2. 边框颜色
border-color: #0000ff

3. 左边框颜色
border-left-color: #ff0000

4. 左边框宽度
border-left-width: 15px

5. 设置四个位置边框的颜色
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)  上右下左


七. 选择器
1. 类选择器: 类选择器以一个点号显示
.center {text-align: center}

<p class="center">
This paragraph will also be center-aligned.
</p>

2. id选择器: 以一个点号显示,为标有特定 id 的 HTML 元素指定特定的样式。
#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

3. 属性选择器: 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
1. 有title属性就使用下面的样式
[title]
{
color:red;
}
<h2 title="hello world123">Hello world</h2>
2. title属性值为123就使用下面的样式
[title=123]
{
color:red;
}
<h2 title="123">Hello world</h2>
3. title属性值包含123就使用下面的样式
[title~=123]
{
color:red;
}
<h2 title="hello world">Hello world</h2>
4. 子串匹配属性选择器
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
5. 有两个属性
a[href][title]
{
color:red;
}
<a title="W3School Home" href="http://w3school.com.cn">W3School</a> 可以使用css样式
<a href="http://w3school.com.cn">W3School</a> 无法使用css样式

4. 派生（后代）选择器: 通过依据元素在其位置的上下文关系来定义样式
li strong 
{
font-style: italic;
font-weight: normal;
}
  
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

备注： <strong>只要在<li>标签中，不论嵌套多少层，都会改变样式

5. 子元素选择器（与后代选择器类似）
h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

备注： 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
如果是派生选择器的写法，则第二条中的strong也会变色


6. 相邻兄弟选择器（可选择紧接在另一元素后的元素，且二者有相同父元素。）
h1 + p {color:red;}

<h1>This is a heading.</h1>
<p>This is paragraph.</p> 仅这个会变色，因为其他不是紧接在h1标签后的
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>


八、 css框模型
从外到内依次是：外边距margin/边框border/内边距padding/元素element






九. 伪类和伪元素
1. 伪类： 伪类用于向某些选择器添加特殊的效果。
①. 锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

a.red : visited {color: #FF0000} (与类选择器混合使用)
<a class="red" href="css_syntax.asp">CSS Syntax</a>

②. :first-child 伪类
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。
第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
③. :lang伪类
q:lang(no){quotes: "~" "~"}
   
提示:
:lang 伪类使你有能力为不同的语言定义特殊的规则。  
:lang 类为属性值为 no 的 q 元素定义引号的类型

<p>文字<q lang="no">段落中的引用的文字</q>文字</p>


2. 伪元素
①. :first-line 伪元素：用于向文本的首行设置特殊样式。
p:first-line
  {
  color:#0000ff; //第一行中的文本将变为蓝色
  font-variant:small-caps; //并以小型大写字母显示
  }

②. :first-letter 伪元素：用于向文本的首字母设置特殊样式。
注释："first-letter" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "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; //首字母大写
  }




③. :before 伪元素：用于在元素前设置特殊样式。

④. :after 伪元素：用于在元素后设置特殊样式。





十. 样式表的使用
1. 外部样式表：当多个页面使用同样的样式时，使用外部样式表是最好的选择，可以修改一个文件改变多个页面的外观
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

2. 内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。
你可以使用 <style> 标签在文档头部定义内部样式表
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3. 内联样式： 在相关的标签内使用样式（style）属性
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

4. 多重样式： 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。