百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

CSS备忘录

作者缪莲海课程任务二:零基础HTML及CSS编码(一)2102次浏览12017-03-16 13:39

css基本内容

HTML<!DOCTYPE>声明标签

1.定义和用法:

< !DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前。
< !DOCTYPE>声明不是HTML标签;它指示web浏览器关于页面使用哪个HTML版本进行编码的指令
在HTML 4.01中< !DOCTYPE>声明引用DTD,因为HTML 4.01基于SGML。
DTD规定了标记语言的规则,这样浏览器可以正确地呈现内容。
HTML5不基于SGML,所以不需要引用DTD

2.各版本的声明:

HTML5:

< !DOCTYPE>
< meta charset="utf-8" >

HTML4.01:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
< meta http-equiv=Content-Type content="text/html;charset=utf-8">
注意规则
1.单标记必须闭合:比如< br>必须写为< br /> < input />
2.单属性必须添加属性值:比如< input typr="radio" checked >必须写为< input typr="radio" checked="checked" />
3.标记和属性必须使用小写:比如< Body>< BODY>是错的必须写为< body>
4.属性的属性值必须使用"":比如在HTML4.01之前可以使用< body bgcolor=red>,HTML4.01必须写为< body bgcolor="red">

使用CSS样式的方式:

1.内联样式表:

例如

< body style="background-color:green;margin:0;padding:0;">< /body>

2.嵌入式样式表:

例如

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

注意:需要将样式放在< head> < /head>中

3.引入式样式表

例如:

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

定义样式表(CSS选择器):

1.HTML标记定义:

比如:HTML文档中含有p标记—— < p>< /p>
使用 p{属性1:属性值1;属性2:属性值2;} 来控制p标记样式。
其中p可以叫做选择器,定义那个标记中的内容执行其中的样式。
一个选择器可以控制若干个样式属性,他们之间需要用英语的";"隔开,最后一个可以不加;

2.Class定义:

< p class="p">...< /p>
class定义从" . " 开始
.p{属性1:属性值1;属性2:属性值2;}

3.ID定义:

< p id="p">...< /p>
class定义从" # " 开始

#p{属性1:属性值1;属性2:属性值2;}

4.优先级问题:

1.ID>Class>HTML
2.同级时选择离元素最近的一个
例如:

#p{color:red;}

#p{color:blue;}
执行颜色为blue的

5.组合选择器(同时控制多个元素):

h1,h2,h3{font-size:14px;color:red;}
组合选择器可以使用","隔开

6.伪元素选择器:

  1. a:link 正常连接的样式
    2.a:hover 鼠标放上去的样式
    3.a:active 选择链接时的样式
    4.a:visited 已经访问过的链接的样式

CSS的常见属性(CSS选择器):

1.颜色属性:

color属性定义文本颜色。
color:green
color:#ff6660 简写式 color:#f60
color:rgb(255,255,255)——r,g,b每个颜色的取值范围0~255
color:rgba(255,255,255,1)——r,g,b还是三原色,a表示Alpha的(色彩空间)透明度

2.字体属性:

1.font-size字体大小:

px:设置一个固定的值
%:父元素的百分比
smaller:比父元素更小
larger:比父元素更大
inherit:继承父元素

2.font-family定义字体:

font-family:'微软雅黑','serif';
可以使用","隔开,来确保当字体不存在的时候直接使用下一个。

3.font-weight字体加粗:

normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
400 = normal,而 700 = bold
如果用数字表示取值范围是100~900,且必须是整百数,401之类,是绝对不可以的。

4.font-style字体样式:

normal:正常(标准)
italic:斜体
oblique:倾斜
inherit:继承

5.font-variant小型大写字母显示文本:

主要针对英文,如果选择small-caps就代表着英文字母会大写显示

normal:标准
small-caps:小型大写字母显示文本
inherit:继承

3.背景属性:

1.背景颜色 background-color

2.背景图片 background-image

background-image:url(图片路径)
background-image:none

3.背景重复background-repeat

repeat:重复铺满
repeat-x:向X轴重复
repeat-y:向Y轴重复
no-repeat:无重复

4.背景位置background-position

横向(left,center,right)
纵向(top,center,bottom)
可以用数值来表式位置

5.简写方式

background:背景颜色 url(图像) 重复 位置
background:#f60 url(beautiful.jpg) no-repeat top center

4.文本属性:

1.text-align 横向排列

left,center,right

2.line-height 文本行高

% 基于字体大小的百分比行高
数值 来设置固定值

3.text-indent 首行缩进

% 父元素的百分比
px固定值,默认为0
inherit 继承

4.letter-spacing 字符间距

normal 默认值
px 设置具体的数值(可以设置负值)
inherit 继承

5.word-spacing 单词间距

normal 标准间距
px 设置固定的值
inherit 继承

6.direction 文本方向

ltr 从左到右,默认值
rtl 从右到左
inherit 继承

7.text-transform 文本大小写

capitalize 每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义无大写字母,仅有小写字母
inherit 规定应该从父元素继承 text-transform 属性的值

5.边框属性:

1.边框风格 border-style

统一风格:(简写风格)border-style
单独定义某一方向的边框样式:
border-top-style border-bottom-style 
border-left-style border-right-style
边框风格样式的属性值:

  1. none 无边框
  2. solid 直线边框
  3. dashed 虚线边框
  4. dotted 点状边框
  5. double 双线边框
  6. groove 凸槽边框
  7. ridge 垄状边框
  8. inset inset边框
  9. outset outset边框
  10. inherit 继承
    其中,6~9依托于border-color的属性值(用的比较少)

2.边框宽度 border-width

  1. thin 细边框
  2. medium 中等边框
  3. thick 粗边框
  4. px 固定值的边框
  5. inherit 继承

3.边框颜色 border-color

1.统一风格:border-color
2.单独风格:
border-top-color border-bottom-color
border-left-color border-right-color
3.属性值:RBG、RGBA、十六位进制、inherit
4.属性值的四种情况:
一个值(border-color [上、下、左、右])
两个值(border-color [上、下] [左、右])
三个值(border-color [上] [左、右] [下])
四个值(border-color [上] [右] [下] [左])

4.简写方式

border: solid 2px #f60

6.列表属性:

1.标记类型 list-style-type

none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

2.标记的位置 list-style-position

inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。

3.设置图像列表标记 list-style-image

URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

4.简写方式 list-style

list-style:square inside url('/i/arrow.jpg')

4.DIV+CSS布局

1.div和span
div和span在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式.
div和span的区别在于,span是内联元素,div是块级元素
2.盒模型

margin: 盒子外边距
padding: 盒子内边距
border: 盒子边框宽度
width: 盒子宽度
height: 盒子高度

3.布局相关的属性

1.position定位方式

1.relative 正常定位
2.absolute 根据父元素进行定位
3.fixed 根据浏览器窗口进行定位
4.static 没有定位
5.inherit 继承

2.定位

left、right、top、bottom 离页面顶点的距离

3.z-index 层覆盖先后顺序(优先级)

4.display显示属性

display:none 该层不显示
display:block 块状显示,在元素后面换行,显示下一个块元素(block会尽可能的占据更多的width)
display:inline 内联显示,多个块可以显示在一行内(只占据它需要的width)

5.float浮动属性

left 左浮动
right 右浮动

6.clear清除浮动

clear:both

7.overflow溢出处理(主要是盒子小了,内容多了)

hidden 隐藏超出层大小的内容
scroll 无论内容是否超出大小都添加滚动条
auto 超出时自动添加滚动条

8.box-sizing设定盒模型的类型

通常,当我们定义一个div的时候,我们给出的width和height其实仅仅只是盒子的content的宽和长。
padding和border会另外加上。
比如:
div {
   width:300px;
   height:300px;
   padding:10px;
   border:10px;
}
此时的盒模型将会是320x320的大小,并不是我们希望的300x300
为了避免这样情况的发生,我们会使用

  • {
      box-sizing:border-box;
    }
    这时候,我们同样使用如下代码,
    div {
       width:300px;
       height:300px;
       padding:10px;
       border:10px;
    }
    此时的盒模型,大小依旧是300x300,content只有260x260
0条评论