HTML，css和JavaScript的基础学习—css篇

HTML，css和JavaScript的基础学习—css篇

1.css是什么？由什么组成？

层叠样式表，定制html元素的显示样式，美化页面，对于前端页面的搭建十分重要。
由三部分组成：选择器，属性，值。

2.css的作用

• （1）CSS 指层叠样式表 (Cascading Style Sheets)
• （2）样式定义如何显示 HTML 元素
• （3）样式通常存储在样式表中
• （4）把样式添加到 HTML 中，是为了解决内容与表现分离的问题
• （5）外部样式表可以极大提高工作效率
• （6）外部样式表通常存储在 CSS 文件中
• （7）多个样式定义可层叠为一个

3.选择器的种类

• 元素选择器
  直接写元素标签名加{}，在{}中写属性，body中所有的这种元素的属性都会改变
• id选择器
  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  id 选择器以 “#” 来定义。
• 类选择器
  类选择器可以为标有特定 class 的 HTML 元素指定特定的样式。可以用于区分不同的HTML元素。
  类选择器以 “.” 来定义
• 派生选择器
  派生选择器允许你根据文档的上下文关系来确定某个标签的样式。比如你希望div下的p标签的字体为蓝色：

<div>
	<p>才能的火花，常常在勤奋的磨石上迸发。</p> 
</div>
css:
  div p{ color: blue; }

• 选择器继承
  根据 CSS，子元素从父元素继承属
• 选择器联合使用
  同时对多个元素设置同一个样式：
  h1,h2,h3,h4,h5,h6 { color: green; }

4.背景样式

• 属性为元素设置背景色。div{background-color: gray;}
• 设置背景图像：要把图像放入背景，需要使用 background-image 属性。
  body{ background-image: url('图片的路径') }
• 设置背景图像重复：background-repeat 属性设置是否及如何重复背景图像。
  对应的值为：
  repeat：重复
  no-repeat：不重复
  repeat-x：水平方向重复
  repeat-y：垂直方向重复
• 背景图像定位：以利用 background-position 属性改变图像在背景中的位置。
  top left
  top center
  top right
  center left
  center center center right
  bottom left
  bottom center
  bottom right
  也可以使用百分比 background-position: 0% 10%;
  也可以使用像素 background-position: 50px 50px;
• 防止背景图像随着页面滚动 background-attachment: fixed;

5.文本样式

• 文字颜色
  使用属性color来指定文字颜色，其属性取值是CSS颜色。
• 文本缩进
  CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
  缩进可以使用下面三种值：
  em 长度单位，一般而言 1em = 16px
  px 像素
  % 百分比
• 文本装饰
  text-decoration属性规定添加到文本的修饰，如加下划线、上划线、删除线等。
  none 无装饰
  underline 下划线
  overline 上划线
  line-through 删除线
• 水平对齐
  text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
  left 左对齐
  right 右对齐
  center 居中
• 行间距
  p{line-height: 130px;}
  130px是 字体+到上一行的距离+到下一行的距离

6.字体样式

指定字体
指定字体: font-family
p {font-family: sans-serif;}      不常用
字体尺寸
font-size设置字体的尺寸
p{ font-size: 100px; }
字体粗细
font-weight设置字体的粗细。
   normal 默认值。定义标准的字符。
    bold 定义粗体字符。
    bolder 定义更粗的字符。
    lighter 定义更细的字符。
   100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
字体样式简写
p{ font: bolder 50px sans-serif; } 粗细 尺寸 指定字体

7.框模型

由内边距，边框，外边距组成。

• 元素框的最内部分是实际的内容，直接包围内容的是内边距。
• 内边距的边缘是边框。
• 边框以外是外边距。

1.内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
p{padding:30px 0px 60px 0px;}
单边内边距

• padding-top
• padding-right
• padding-bottom
• padding-left

2.边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
边框样式

• dotted 点状边框
• dashed 虚线
• double 双线
• solid 实线

也可以设置单边框样式：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

简写形式： border-style: dotted dashed double solid;
可以通过 border-width 属性为边框指定宽度。
可以通过border-color属性设置边框的颜色 border-color: red;
3.外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
设置此元素上下左右居中： margin:0 auto;
简写设置外边距margin，依次是上 右 下 左： margin:30px 0 0 50px;
单边外边距属性

• margin-top
• margin-right
• margin-bottom
• margin-left

8.css定位

1.relative 相对定位
相对定位元素的定位是相对其正常位置。就是相对于它原来的位置
2.absolute 绝对定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
3.fixed 固定定位
格式： 自身属性中加上：position:absolute
父级属性中加上：position：relative

9.浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或 另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响
如果图像（块级标签）是右浮动，下面的文本流将环绕在它左边：float:right;
如果图像（块级标签）是上下居中浮动，下面的文本流将从图像中间开：float:top;

扩展点
去除a标签的下划线：text-decoration : none；
去除列表的符号前缀：list-style-type : none;