[关闭]
@zhangzexiang 2017-07-11 22:31 字数 1894 阅读 1032

css

CSS


CSS介绍

CSS层叠样式表,与HTML一样也是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译,它的作用是能够从整体来直接定义HTML的格式。

  1. 外联式Linking(也叫外部样式):将网页链接到外部样式表。
  2. 嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。
  3. 内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。
    其中,优先级:内联式 > 嵌入式 > 外联式
  1. <h2 style="color: red">html编程入门教程</h2> /*Inline*/

CSS语法

CSS语法是书写在<head> <style>CSS语法</style> </head>中的。注意,所有的CSS代码都是写在<style>中的.

CSS选择器

ID选择器 class选择器 复合选择器
用法上id给js用,class给css用,id一般只用于锚点功能。定义样式还是用class选择器.

  1. <head>
  2. <title>W3Cschool教程(w3cschool.cn)</title>
  3. <style>
  4. #para1 /*id选择器用法*/
  5. {
  6. text-align:center;
  7. color:red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p id="para1">Hello World!!!</p>
  13. </body>
  1. <html>
  2. <head>
  3. <title>W3Cschool教程(w3cschool.cn)</title>
  4. <style>
  5. .center /*想单个定义的话就这样 p.center*/
  6. {
  7. text-align:center;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1 class="center">This heading will not be affected</h1>
  13. <p class="center">This paragraph will be center-aligned.</p>
  14. </body>
  15. </html>

CSS样式

 背景 文本 字体 链接 列表 表格
  1. /*案例*/
  2. body
  3. {
  4. background-color:#d0e4fe; /*背景颜色:淡蓝色*/
  5. }
  6. h1
  7. {
  8. color:orange;
  9. text-align:center;
  10. }
  11. p
  12. {
  13. color:red; /*颜色:红色*/
  14. text-align:center; /*文本对齐:居中*/
  15. font-family:arial; /*字体族:宋体*/
  16. font-family:"Times New Roman";/*字体族:新罗马字体*/
  17. font-size:20px; /*字体大小:20px*/
  18. }

背景

  1. background-color:#cccccc; /*背景颜色*/
  2. background-image:url('图片地址'); /*背景图片*/
  3. background-repeat/*背景重复*/
  4. background-attachment/*背景附件*/
  5. background-position/*背景位置*/

文本

  1. color 设置文本颜色
  2. direction 设置文本方向。
  3. letter-spacing 设置字符间距
  4. line-height 设置行高
  5. text-align 对齐元素中的文本
  6. text-decoration 向文本添加修饰
  7. text-indent 缩进元素中文本的首行
  8. text-shadow 设置文本阴影
  9. text-transform 控制元素中的字母
  10. unicode-bidi 设置或返回文本是否被重写
  11. vertical-align 设置元素的垂直对齐
  12. white-space 设置元素中空白的处理方式
  13. word-spacing 设置字间距

字体

  1. font 在一个声明中设置所有的字体属性
  2. font-family 指定文本的字体系列
  3. font-size 指定文本的字体大小
  4. font-style 指定文本的字体样式
  5. font-variant 以小型大写字体或者正常字体显示文本。
  6. font-weight 指定字体的粗细。

链接

列表

  1. list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
  2. list-style-image 将图象设置为列表项标志。
  3. list-style-position 设置列表中列表项标志的位置。
  4. list-style-type 设置列表项标志的类型。

表格

盒子模型

图片名

CSS定位

 相对定位 绝对定位 浮动
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注