初探css,了解个大概，本文主要是对"zhaolion: CSS入门笔记 － 初识CSS"的简要记录
CSS的好处
－ 避免重复
－ 更容易维护
－ 为不同的目的，使用不同的样式而内容相同
基本用法
ｈ1 {color:red;font-size:14px}
选择器｛声明１（属性：值）; 声明２｝
CSS样式的引入
- 内嵌式
- 嵌入式
- 外部式
- 三种方式优先级
内嵌式
<p style="color:red">这里的文字为红色</p>
嵌入式
一般嵌在<head></head>标签内
<head>
<style type="text/css">
p{
color:red
}
</style>
</head>
外部式
独立一个类似"main.css"的文件存储一些基本信息
p {color:red;}
a {color:green;}
...
然后在<head>标签内引入
<head >
<link href="main.css" rel="stylesheet" type="text/css">
</head>
三种引入方式的优先级
内嵌式＞嵌入式＞外部式
另外：如果嵌入式和外部式同时使用，外部式＂link＂标签要在内嵌式标签"style"前面
CSS选择器
- 标签选择器
- 类选择器
- ID选择器
- 通配符选择器
- 属性选择器
标签选择器
标签选择器是对于"HTML"标签进行选择设置样式．比如标签"p"和"h1"
p{color:red;}
h1{color:green;}
类选择器
.className定义一个类别以英文"."开头，进行区分选择，在合适的位置引用
<head>
<style>
.stress{color:red;}
</style>
</head>
...
<p class="stress">这里是红色</p>
...
ID选择器
#idNameID选择器，以"#"开头定义一个格式，在合适的位置使用id="idName"引用，ID选择器在一个"html"文档中只能使用一次，类选择器可多次使用
通配符选择器
使用通配符选择特定的标签，设置样式．比如*{color:red}，所有的标签原色字体都会变成红色
属性选择器
为指定属性的元素设置样式
[stitle]{color:red;}
字体设置
字号
字体
加粗
倾斜
行距
字母距
颜色
字号
font-size:<absolute-size>|<relative-size>|<length>|<percentage>|<inherit>
<absolute-size>: small large medium
<relative-size>: smaller larger
一般直接使用14px,2em,`200%
字体
font-family:[<family-name>][<generic-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|<number>|<length>|<percentage>
字间距
letter-spacing: normal|<length>
改变文字颜色
color: <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|<percentage>|<length>
<percentage>的参照物为line-height
文本缩进
text-indent:<length>|<percentage>&&[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单词间的任意字母都可以换行
网友评论