第四天：css基础

CSS概述

网页的主要组成可以分为三个部分：结构、表现和行为；结构主要是通过HTML语言实现，表现通过CSS实现，行为通过javascript实现。

前端页面 html css javascript

什么是CSS？有什么用？

CSS（Cascading Style Sheet，可以译为“层叠样式表”或“级联样式表”），是一组格式设置规则，用于控制web页面的外观。

使用CSS的好处

1、CSS样式表，可以制作出体积更小、下载更快的网页

2、快速、便捷地维护及更新大量的网页

3、浏览器的界面将更加友好

4、内容结构性独立

使用CSS的方式(重点)

1、将css内嵌到HTML文件中

这种方式写的CSS又叫内联样式表，例如：

 

2、将一个外部样式链接到HTML文件中

这种方式书写的CSS又叫链接样式表，例如

 

3、将一个外部样式输入到HTML文件中

 

4、将样式表加入到HTML文件行中

这种方式写入的CSS又叫行内样式表

 

CSS的基本语法

CSS语法由三个基本部分构成：选择符（Selector）、属性（Properties）和属性的取值（Value）

格式：Selector｛Properties:Value｝(选择符｛属性：值｝)

CSS选择器

标签选择器

标签选择器就是直接使用HTML标签名称作为CSS选择器的名称，这种方式会影响HTML中所有此标签的样式；例如：

 

类选择器

类（class）选择器就是将相同类型的元素进行分类定义，分类定义的好处就是能够复用。在类名前面加符号”.”，表示定义一个类选择器，引用的时候在标签后面加class 引用 ；例如：

 

ID选择器

ID选择器与类选择器的定义与引用方式类似，只是定义的符号不一样。ID通常表示唯一值，因此，ID选择器在CSS 中通常只出现一次。如果出现多次也能解析，但是不建议这样使用

 

相邻选择器

相邻选择器可以选择紧跟其后的相邻元素

 

 

多元素选择器

当几个元素有共同属性的时候，可以使用多元素选择器，用逗号隔开

 

后代选择器

后代选择器作用于父元素下面的所有子元素

 

子元素选择器

子元素选择器作用于父元素的子元素，子元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，而子元素选择器只能作用于它的子元素

 

属性选择器

E[attr] 匹配所有具有att属性的E元素，不考虑它的值 input[type]

 

E[attr = val] 匹配所有attr属性值等于val的E元素  input[value=it2] 属性值一般不加引号

 

 

 

伪类选择器

<a>标签，其对应4种不同的状态：

未访问链接(link)、

   鼠标放上状态(hover)、

   已访问链接(visited)、

   当前活动链接(active)。

未访问链接状态：

 

鼠标放上状态：

 

已经访问过状态：

 

当前活动状态：

 

CSS常规属性

颜色相关属性

color属性定义文本颜色

 

 

 

color属性值常用表示方式

第一种表示方式：颜色名，如red，green，blue等

第二种表示方式：用16进制表示颜色值，如#FF0000,#00FF00，可以简写成#F00，#0F0;

 

第三种表示方式：RGB模式，红(R)、绿(G)、蓝(B) 每个的取值范围0~255，color：rgb（0,255,0）

第四种表示方式：RGBA模式，RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度，color：rgba（255,255,255,0.5）

 

文字相关属性

字体样式

font-family 定义字体，font-family：宋体，serif；可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个

font-size 字体大小

font-size:14px

font-weight 字体加粗

font-weight:normal;normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)

 

字体颜色

color：#FF0；

背景相关属性

背景颜色 background-color

background-color:#ccc;

背景图片 background-image

background-image:url(图片路径)

背景重复 background-repeat

重复平铺满 repeat;向Y轴重复 repeat-y;向X轴重复 repeat-x;不重复 no-repeat;

背景位置 background-position

横向（left,center,right）;

纵向（top,center,bottom）

 

简写方式

background:背景颜色 url(图像) 重复 位置;

background:#f60 url(images/bg,jpg) no-repeat top center

 

边框相关属性

边框圆角

 

Border-radius   像素或者%

 

边框风格 border-style

单独定义某一方向的边框样式

border-bottom-style 下边边框样式

border-top-style 上边边框样式

border-left-style 左边边框样式

border-left-style 左边边框样式

边框风格样式的属性值

none 无边框

solid  直线边框

dashed  虚线边框

dotted 点状边框

double  双线边框

groove 凸槽边框

ridge 垄状边框

inset inset边框

outset outset边框

inherit继承

边框颜色 border-color

统一风格 border-color

单独风格 

border-top-color 上边边框颜色

border-bottom-color 下边边框颜色

border-left-color 左边边框颜色

border-right-color 右边边框颜色

 

属性值

RGB  red、green

颜色值的名称 rgb(255,255,0)

RGBA rgba(0,255,0,0.9）

十六位进制 #ccc、#ff0000

 

属性值的四种情况

一个值：border-color：（上、下、左、右）；

两个值：border-color：（上下） （左右）；

三个值：border-color:（上） （左、右） （下）;

四个值：border-color：（上）（右）（下）（左）;

 

简写：

border：1px solid #fff;

文本相关属性

text-align  横向排列

line-height 文本行高

     %基于字体大小的百分比行高

     数值 来设置固定值

text-indent 首行缩进

letter-spacing 字符间距

 

列表相关属性

标记的类型

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, 等。（日文片假名）

标记的位置

list-style-position

inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

inherit 规定应该从父元素继承 list-style-position 属性的值。

设置图像列表标记

list-style-image

URL 图像的路径。

none 默认。无图形被显示。

inherit 规定应该从父元素继承 list-style-image 属性的值。

简写方式

list-style

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

DIV+CSS布局

 

 

DIV和SPAN

DIV的全称divsion 是区分的意思，称为区隔标记，也就是层的概念。它的作用就是为了设定字、画和表格等HTML元素的摆放位置，为HTML页面提供结构框架。

SPAN 通常用来定义一小段文字的样式。

 

块级元素：块级元素独占一行，每次都从新行上开始，宽度，行高以及外边距和内边距都是可以设置的，如果宽度省略的话，默认充满整个容器，并且可以容纳其他行内元素

行内元素：在一行内显示，不单独占行，不可以设置宽高

块级元素行内元素区别？

为什么img input 行内标签 但是可以设置宽和高？

替换元素：根据元素的属性来显示样式  img input select 

不可替换元素：根据原来预设好功能来显示 <strong> <b>

盒子模型

盒子模型是什么？

网页设计，首先要做好整体的布局，网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置，因此会经常用到一些内容、填充、边框、边界等属性，html布局元素经过不同的嵌套与位置的摆放，就类似于日常生活中的用盒子装东西，把每一个布局元素看成一个盒子，引出了盒子模型

 

元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

 

margin

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

有四个值的时候：margin:10px 5px 15px 20px;（顺序依次是 上 右 下 左）；

有三个值的时候：margin:10px 5px 15px; （顺序依次是 上 左右 下）；

有两个值的时候：margin:10px 5px; （顺序依次是 上下 左右）

有一个值的时候 margin：10px；（代表四个值都是10px）

padding

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

padding 简写时值的顺序与margin相同

布局相关属性

标准文档流：指的是在不使用其他的与排列和定位相关的特殊css规则时，各种元素的自然排列规则

浮动：脱离标准文档流并且可以左右移动

float:left;向左浮动；  float：right;向右浮动

clear 清除浮动

clear：both

overflow 溢出处理

overflow:hidden;

定位

相对定位

position:relative;

left[right][top][bottom]

绝对定位

position:absolute;

left[right][top][bottom]

根据浏览器窗口定位

PC端布局实战

需求：做一个企业网站的整体布局

第一步：分析网站的整体结构

第二步：搭建页面整体框架

第三部：写css样式

 

 

CSS继承

CSS的继承指的是子元素将拥有父元素的相关属性。CSS继承特性常用的就是reset样式。在写css之前，由于各个浏览器对html标签的预设样式不统一，因此，需要将相关标签样式重置，统一样式。

 

CSS优先级

原则一：继承不如指定；

原则二：ID选择器优先级大于类选择器，类别选择器大于标签选择器

原则三：越具体级别越高

原则四：标签.#id优先级大于#id，标签.class大于.class