关于css总结

css知识小结

标签： web作业

---

目录

• css知识小结
  • • 1.关于css的认识
    • 2.css语法结构
      • 1.外部样式表
    • 3.文本
      • 1.文本颜色
      • 2.文本对齐
    • 4.背景
    • 5.链接
    • 6.盒子
    • 7.列表
      • 1.有序列表
      • 2.无序列表
    • 8.边框
    • 9.填充
    • 10.浮动
    • 11.布局
      • 1.居中对齐
      • 2.左右对齐

目录

1.关于css的认识

CSS全称Cascading StyleSheets，叫做级联样式表，是用来美化之前用html构建的网页的显示内容；如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。百度 查询。

• css指样层叠样式表
• 样式定义如何显示HTML元素
• 样式通常存储在样式表中
• 外部样式表可以极大提高工作效率

2.css语法结构

1.构成
声明
2.选择器
其中选择器又分为原色选择器、id选择器和class选择器。
3.css创建
有三种方式插入样式表

• 外部样式表
• 内部样式表
• 内联样式表

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
`

` 特别注意，外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。 ####2.内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 ` ####3.内联样式表 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

这里要说明多重样式表是优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

3.文本

1.文本颜色

颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
css参考
例如：
body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}

2.文本对齐

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
例如：
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
3.文本字体
font-family 属性设置文本的字体系列。
font-size 属性设置文本大小。
这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
例如：
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}

<h1> - <h6>表示标题和<p>表示段落：

4.背景

CSS 属性定义背景效果有一下几种:
background-color|设置元素的背景颜色。
background-image|把图像设置为背景。
background-repeat|设置背景图像是否及如何重复。
background-attachment|背景图像是否固定或者随着页面的其余部分滚动。
background-position|设置背景图像的起始位置。

5.链接

有四个状态
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

例如：
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */

6.盒子

盒子模型指的是一个HTML元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
盒子设置的样式：
.box1 { height: 200px; width: 200px; background-color:#615200; color: aliceblue; border: 10px solid red; padding: 25px; margin: 25px; }

7.列表

1.有序列表

列表项标记用特殊图形（如小黑点、小方框等）
无序列表如下所示:

• Coffee
• Tea
• Coca Cola

2.无序列表

列表项的标记有数字或字母
有序列表如下：
1.Coffee
2.Tea
3.Coca Cola
4.Coffee
5.Tea

例如：
ul.a {list-style-type: circle;} ol.c {list-style-type: upper-roman;}

8.边框

border-style属性用来定义边框的样式

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

9.填充

用padding元素进行填充，定义元素边框与元素内容之间的空间，即上下左右的内边距。
例如：
padding-top:45px; padding-bottom:30px; padding-right:60px; padding-left:50px;
上述的意思是
上内边距是 45px
右内边距是 60px
下内边距是 30px
左内边距是 50px

10.浮动

使元素向左或向右移动，其周围的元素也会重新排列。
img { float:right; }
浮动之后使用clear清除
.text_line { clear:both; }

11.布局

1.居中对齐

水平居中对齐一个元素(如

), 可以使用 margin: auto;。
例如：
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }

2.左右对齐

使用 position: absolute;
例如：
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }

更多了解可以去菜鸟教程
这里仅对我掌握知识进行小结。