CSS_基础

初探css,了解个大概，本文主要是对"zhaolion:　CSS入门笔记 － 初识CSS"的简要记录

CSS的好处

－　避免重复
－　更容易维护
－　为不同的目的，使用不同的样式而内容相同

基本用法

ｈ1 {color:red;font-size:14px}

选择器｛声明１（属性：值）; 声明２｝

CSS样式的引入

• 内嵌式
• 嵌入式
• 外部式
• 三种方式优先级

内嵌式

这里的文字为红色

嵌入式

一般嵌在标签内

外部式

独立一个类似"main.css"的文件存储一些基本信息

p {color:red;}
a {color:green;}
...

然后在标签内引入

三种引入方式的优先级

内嵌式＞嵌入式＞外部式

另外：如果嵌入式和外部式同时使用，外部式＂link＂标签要在内嵌式标签"style"前面

CSS选择器

• 标签选择器
• 类选择器
• ID选择器
• 通配符选择器
• 属性选择器

标签选择器

标签选择器是对于"HTML"标签进行选择设置样式．比如标签"p"和"h1"

p{color:red;}
h1{color:green;}

类选择器

.className定义一个类别以英文"."开头，进行区分选择，在合适的位置引用

    

...
这里是红色
...

ID选择器

#idNameID选择器，以"#"开头定义一个格式，在合适的位置使用id="idName"引用，ID选择器在一个"html"文档中只能使用一次，类选择器可多次使用

通配符选择器

使用通配符选择特定的标签，设置样式．比如*{color:red}，所有的标签原色字体都会变成红色

属性选择器

为指定属性的元素设置样式

[stitle]{color:red;}

字体设置

字号
字体
加粗
倾斜
行距
字母距
颜色

字号

font-size:||||

: small large medium
: smaller larger

一般直接使用14px,2em,`200%

字体

font-family:[][][genric-family]

加粗字体

font-weight:norml|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

倾斜字体

font-style:norml|italic|oblique|inhert

oblique：在没有斜体字体时，强制倾斜

更改行距

line-height:normal|||

字间距

letter-spacing: normal|

改变文字颜色

color:

对齐方式

文字对齐
文本垂直对齐
文本缩进

文字对齐

text-align:start|end|left|right|center|justify|match-parent|start end

默认文本左对齐

文本垂直对齐

vertical-align:baseline|sub|super|text-top|text-bottom|middle|top|bottom||

的参照物为line-height

文本缩进

text-indent:|&&[haning||each-line]

缩进两个字可使用text-indent:2em

格式处理

保留空格格式

white-space:normal|pre|nowrap|pre-wrap|pre-line

文字换行

word-wrap:normal|break-word

允许长单词自动换行

word-break:normal|break-all|keep-all

break-all单词间的任意字母都可以换行