css基础探索(一)

1、概叙
      CSS是Cascading Style Sheets(层叠样式表)的简称，由W3C制定和维护，CSS目前最高的版本是3.0同HTML一样，CSS语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行(属于浏览器解释型语言)。

      CSS文件也是一个文本文件，它包含了一些CSS标记(定义HTML标签如何呈现的规则)，CSS文件必须使用.css作为文件名后缀，CSS文件可以单独存在，也可以嵌入到HTML文档中，甚至可以嵌入到某个HTML标签中。

2、css作用

参考：http://www.csszengarden.com/

3、css分类

• 行内样式表

       style= “样式属性1:值1;样式属性2:值2;...”

• 内嵌样式表

       <style type="text/css“></style>

• 外部样式表

       <link href="stylesheet.css" rel="stylesheet" type="text/css" />

4、样式表的优先级

行内 > 内嵌 > 外部

5、语法

<style type=“text/css”>

    .abc{

            color:red;

           }

</style>

图示解析

6、选择器

标签选择器

h1{...}

类选择器

.abc{...}

ID选择器

#name{...}

派生选择器

h1 p {...}

群选择器

h1,h2{...}

通配选择

*{...}

name*{...}

伪类选择器

:link{...}

7、文本css

字体

font-family:sans-serif,微软雅黑;

文字颜色

color:red;

字号

font-size:14px;

font-size:1em;

斜体

font-style:italic;

font-style:oblique;

font-style:normal;

粗体

font-weight:bold;

font-weight:normal;

大小写

text-transform:uppercase;

text-transform:lowercase;

text-transform:capitalize;

装饰线

text-transform:uppercase;

text-transform:lowercase;

text-transform:capitalize;

text-decoration:underline;text-decoration:overline;text-decoration:line-through;text-decoration:none;

text-decoration:underline overline line-through;

字母间距

letter-spacing:2px;

letter-spacing:-5px;

单词间距

word-spacing:4px;

行间距

line-height:20px;

line-height:1.5;

line-height:150%;

文本对齐

text-align:left;

text-align:center;

text-align:right;

首字符

p:first-letter {}

首行

p:first-line {}

文本缩进

text-indent:2em;

8、样式列表

样式：

disk 实心圆circle

空心圆square 实心方形

decimal 十进制

decimal-leading-zero 十进制前置零

upper-alpha 大写字母

lower-alpha 小写字母

upper-roman 大写罗马字母

lower-roman 小写罗马字母

注：ul {list-style-type:square}

项目符号位置：

list-style-position:outside;

list-style-position:inside;

图片项目符号：

list-style-image:url(img/1.png)

Demo：https://github.com/yssEric/cssDemo.git

css基础探索(二)