html复习六---CSS学习1----基本

CSS学习1----基本               

1.Css的主要作用是网页的布局和美化。

 

2.概念：CSS是Cascading Style sheets (即层叠样式表)的简称，由W3C指定和维护。

 

3.同html一样，CSS语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行。

 

4.css文件也是一个文本文件，它包含了一些CSS标记（定义HTML标签如何呈现的规则）；

CSS文件必须使用.css作为文件名的后缀，css文件可以单独存在，也可以嵌套到HTML文档中，甚至可以嵌入到某个HTML标签中。

 

5.CSS的分类：

 

<1>.行内样式表：

eg.

<h1 style="color:red;font-size:12px;">文本内容</h1>

 

<2>.内嵌样式表：（写在head标签中） → 常用在某个网页中。

<style type="text/css">

h1{

color:red;

font-size:12px;

}

</style>

 

<3>.外部样式表：→ 应用在整个网站的！

<link rel="stylesheet" href="style.css" type="text/css"/>  → notepad++快捷键：link:css

 

注意：href的值为css文件的路径。

 

<4>三种样式表的优先级：行内样式表 ＞　内嵌样式表　＞外部样式表

 

6.CSS的语法结构：

 

 

 

7.CSS常用的选择器：★

 

 

说明：

1.类选择器和ID选择器的显示效果是一样的，但是开发中要求ID必须是唯一的！！

2.通配选择器我们使用的比较少！

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下面是常用的属性和值：★(这里写的都是常用的！)

 

CSS中唯一的注释为：/*     */

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.选择字体：

eg.

p{

font-family:"宋体"，“微软雅黑”；→快捷键为：ff

/*说明：可以写一种字体，或同时写几种字体！*/

}

 

2.文字的颜色：

color:red;(或color:#fe8400;)

 

3.改变字体大小：

font-size:13px; → 快捷键：fz

((默认的是16px;网页中常用的3中字号是：12px 14px 16px)

 

4.斜体：

font-style:italic; → 快捷键：fs:i

或

font-style:oblique;(一般不用) → 快捷键：fs:o

font-style:normal; → 表示费斜体！！

 

5.粗体：

font-weight:bold; → 快捷键：fw:b

font-weight:normal; → 快捷键：fw:n

 

6.大小写：

大写：text-transform:uppercase; → 快捷键：tt:u

小写：text-transform:lowercase; → 快捷键：tt:l

正常：text-transform:none; → 快捷键：tt:n

 

7.装饰：

下划线：text-decoration:underline; → 快捷键：td:u

上划线：text-decoration:overline; → 快捷键：td:o

删除线：text-decoration:line-through; → 快捷键：td:l

无线   ：text-decoration:none; → td:n

 

组合：text-decoration:underline  overline  linethrough;

 

8.字母和字的间距：

letter-spacing:10px;

 

9.单词间距：

word-spacing:5px;

 

10.行间距：☆

line-height:20px; → lh

(说明：一个行的高度大于16px;)

line-height:1.5; → 表示行高是文字大小的1.5倍。

 

11.对齐方式：

左对齐（默认）：text-align:left； → ta:l

右对齐： text-align:right; → ta:r

居中对齐：text-align:center; → ta:c

 

12.首行缩进：

text-indent:2em; → ti

(说明：2em表示是行长的2倍。)

 

13.首字母，首行样式（伪类选择器）→时尚杂志，时尚网站用的多

p:first-letter{

font-size:32px;

}

p:first-line{

color:#997788;

}

 

14.给列表定义样式：不分ul,ol了！！★

<1>.列表的符号类型有以下几种：

disc → 实心圆项目符合

circle → 空心圆项目符号

square → 实心方型符号

 

<2>.6中数字方案：

decimal → 十进制

decimal-leading-zero → 十进制前面置0

upper-alpha → 大写字母

lower-alpha → 小写字母

upper-roman → 大写罗马字母

lower-roman → 小些罗马字母

 

eg.

<ul class="myclass">

     <li>xx</li>

</ul>

 

.myclass {

list-style-type:square;/*设定项目符号，由上面知有10种可用！*/

 

list-style-position:outside; /*设定项目符号在文本框外；如果是inside,在文本框内*/

 

list-style-image:url(a.gif); /*设定某图片为项目符号！url中是图片的路径*/

 

list-style-type:none; /*去掉项目符号*/

}

 

注：www.findicons.com → 可以用来找图标的网站；