Web前端页面设计基础-CSS

CSS基础

使用方式
*内联方式
将样式写在html标记的属性中
<body style="background-color:green;margin:0;padding:0;"></body>
*嵌入方式
将样式放在<head></head>中
<style type="text/css">
div{...}
</style>
*外部方式
将样式保存在.css文件中，将引用放在<head></head>中
<link rel="StyleSheet" (type="text/css" 可省略)href="style.css">

选择器

1.标记选择器：
之前所学过的标记名都是
例：
<p>......</p>
p{属性：属性值；属性1：属性值1}
<div>......</div>
div{属性：属性值；属性1：属性值1}

2.类选择器:名字可以重复，根据标记中的class属性进行选择，class的值可以重复。
类选择器以“”.“”开始
例：<p class="p">...</p>
.p{属性：属性值；属性1：属性值1}
快捷键：.d1+tab键

3.id选择器：名字不能重复
选择器以#号开头
例：<p id="p1">.........</p>
<p id="p2">........</p>
<p id="p3"></p>
快捷键：#d5+tab键

4.并集选择器：同时选择多个标记，多个标记之间使用“，”分隔
例：.d1,.d3,.d7,span p{
color:green;
}

5.派生选择器:表示选择某个标记中的子标记，父标记和子标记之间用空格隔开。
例：
div p{ }表示选择div中的P标记，div中的其他标记不受影响。

6.通用选择器
7.伪类选择器
选择器优先级的问题：内联>嵌入>外部
同一选择器下：
id>class>html
同级时，选择离元素最近一个（就近原则）
一个元素被不同选择器修饰为不同样式时，效果会叠加。

常见的属性

1.颜色属性：

color属性定义文本的颜色
color：green
color：#ff6600

2.字体属性：

font-size字体大小
例：font-size：14px
font-family定义字体
例：font-family：微软雅黑，serif
可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个。
font-weight字体加粗
例：normal（默认值），
bold（粗），
bolder（更粗），
lighter(更细)

3.背景属性

背景颜色background-color
*color指背景颜色
*transparent指定背景颜色应该是透明的，这是默认
*inherit指定背景颜色，应该从父元素继承
背景图片background-image
*background-image：url（图片路径）
*background-image:none
背景图片大小background-size
*length设置高度和宽度。第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个默认为atuo（自动）
*percentage设置百分比，同上
*cover此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最小大小。
*contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

4.文本属性：

*text-align横向排列包含：left，center，right
*line-height首行缩进
*text-decoration（文本的下划线一般用于去除下划线）添加文本修饰，颜色由color属性修饰
属性值none（默认）定义标准文本，用于a标记时，隐藏下划线。
*letter-spacing字符间距：
normal默认
length设置具体的数值（可以设置负值）
inherit继承

5.边框属性：

边框风格border-style
定义某一方向的边框样式
：
-border-bottom-style下边边框样式
-border-top-style上边边框样式
-border-left-style左边边框样式
-border-right-style右边边框样式
属性值：
1.none无边框
2.solid直线边框
3.dashed虚线边框
4.dotted点状边框
5.double双线边框
6.groove凸槽边框
7.ridge垄状边框
8.in set inset边框
9.out set outset边框
10.inherit继承
简写方式：border-style

边框宽度border-width：
单独方式：
-border-top-width上边边框宽度
-border-bottom-width下边边框宽度
-border-left-width左边边框宽度
-border-right-width右边边框宽度
属性值：
-thin细边框
-medium中等边框
-thick粗边框
-px固定值的边框
-inherit继承
简写方式：border-width：

边框颜色border-color：
单独方式
-border-top-color上边边框颜色
-border-bottom-color下边边框颜色
-border-left-color左边边框颜色
-border-right-color右边边框颜色
属性值
颜色值得名称red，green
简写方式：border-color
四种方式：
一个值border-color：（上，下，左，右）
两个值border-color：（上下）（左右）
三个值border-color：（上）（左右）（下）
四个值border-color：（上）（右）（下）（左）

圆角属性：
给元素添加圆角的边框
简写方式：
border-radius
四个值得顺序是：左上角，右上角，右下角，左下角
例如：
border-radius：2em；等价于border-top-left-radius：2em;....top-right;......bottom-right;.....bottom-left;

简写方式border-方向
可以在top，right，bottom，left四个方向分别简写
格式：border-方向：border-方向-width border-方向-color
例：border-bottom：1px solid #ff0000;
缺少一个值没有关系

简写方式border
也可以在所有方向上简写
格式：border：border-width border-style border-color；
例：border：solid 2px #f60
缺少一个值没有关系

6.列表属性

序号类型list-style-type
例：list-style-type：none不显示列表前面的小圆点

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

图像序号
list-style-image
-URL图像的路径
-none默认，无图像被显示
-inherit规定应该从父元素继承list-style-image属性的值。
简写方式：
list-style：list-style-type list-style-position list-style-image
list-style:square inside url('/i/arrow.jpg');
未设置的值使用默认值。

7.其他属性

光标cursor
URL自定义光标的URL
default 默认光标（通常是一个剪头）
auto 默认，浏览器设置的光标
crosshair 光标呈现为十字线
pointer光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
text此光标指示文本
wait此光标指示程序正忙（通常是一只表或沙漏）
help此光标指示可用的帮助（通常是一个问号或一个气球）

div+css布局

div和span
div 和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用css样式
div和span区别在于，span是内联元素，div是块级元素

盒模型

图片.png

*margin
盒子的外边距
四种方式
-一个值：（上下左右）
-两个值：（上下）（左右）
-三个值：（上）（左右）（右）
-四个值：（上）（右）（下）（左）
属性值
-auto浏览器计算外边距。左右都是auto时，相当于居中。
-length规定以具体单位计的外边距值，比如像素，厘米。默认值是0px
-%规定基于父元素的宽度的百分比的外边距
-inherit规定应该从父元素继承外边距。

*padding
盒子内边距
四种方式
-一个值（上下左右）
-两个值（上下）（左右）
-三个值（上）（左右）（下）
-四个值（上）（右）（下）（左）
属性值
-length
规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
-%% 规定基于父元素的宽度的百分比的外边距。
-inherit 规定应该从父元素继承外边距。

*border
盒子边框宽度
属性值
border-width指定边框的宽度
border-style指定边框的样式
border-color指定边框的颜色
inherit指定应该从弗雷元素继承border属性值

*content
盒子的内容，显示文本和图像

*width
盒子宽度

*height
盒子高度
说明：margin，padding，border可以单独设置某个方向，使用：

XXX-top
XXX-bottom
XXX-left
XXX-right
padding和border的值会加在容器上

弹性布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来设置容器中各种元素的对齐方式。
注意，设为Flex布局以后，子元素的float，clear和vertical-align属性将失效。
Flex容器结构：