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;