企业官网建设流程全解析

css(层叠样式表)

html决定页面结构 css控制页面的展示效果

css不区分大小写，但是推荐写成小写的

层叠样式表分为三种:

1.外部样式表（写在独立的.css文件中）–把所有的样式规则写在一个专门的.css文件里，然后在 HTML 中用<link>标签把它“引入”进来 --实际开发中最常用这种

2.内部样式表（直接写在.html里的<style>标签中）

3.内联样式表（直接写在 HTML 元素的style属性里）–一般放到head标签内

效果都是一样的，但是他们之间有显示的优先级关系:遵循就近原则

css有个属性:同一个选择器里，相同的 CSS 属性，后面的声明会覆盖前面的。

body{font-family:'微软雅黑';/* 这行会被覆盖，无效 */font-family:'Microsoft YaHei';/* 只有这行会生效 */}

基础选择器

标签选择器:

<style>p{color:red;}div{color:green;}</style>

这样就是把所有p和div标签都设置成红和绿色

类选择器:

<style>.blue{color:blue;}.box{width:200px;height:150px;}</style><divclass="blue box">我是蓝色的</div>

这样就会把里面指明了类的给设置成对应的样式

注意:类型开头要是.

一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割,)

如果是长的类名, 可以使用 - 分割.

不要使用纯数字, 或者中文, 以及标签名来命名类名.

id选择器:

<style>#ha{color:red;}</style><divid="ha">蛤蛤</div>

CSS 中使用 # 开头表示 id 选择器

id 是唯一的, 不能被多个标签使用

通配符选择器:

* { color: red; }

页面的所有内容都会被改成红色.

通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除–主要用来消除边距

复合选择器

后代选择器(包含选择器):–隔辈也亲

ul li a { color: yellow; } 或者 ul a { color: yellow; }<ul><li>aaa</li><li>bbb</li><li><ahref="#">ccc</a></li></ul>

这样就会把ul里面的li里面的a修改颜色，而不影响其他的

.one li a { color: green; }<olclass="one"><li>ddd</li><li>eee</li><li><ahref="#">fff</a></li><li><ahref="#">fff</a></li><li><ahref="#">fff</a></li></ol>

还可以跟基础选择器混合着使用

子选择器:–只跟自己下一代亲

.two>a { color: red; }<divclass="two"><ahref="#">链接1</a>//就只有这个会改颜色<p><ahref="#">链接2</a></p></div>

并集选择器:

/*把苹果和香蕉颜色改成红色*/ div, h3 { color: red; }<div>苹果</div><h3>香蕉</h3><ul><li>鸭梨</li><li>橙子</li></ul>

伪类选择器:

1.链接伪类选择器:
a:link:选择未被访问过的链接

a:visited:选择已经被访问过的链接

a:hover:选择鼠标指针悬停上的链接

a:active:选择活动链接(鼠标按下了但是未弹起)

链接伪类（:link/:visited/:hover/:active）必须按固定顺序写:LVHA

<a href="#">小猫</a> a:link{color:black;}a:visited{color:green;}

让已经被访问过的链接恢复成未访问的状态的方法:清空浏览器历史记录(ctrl+shift+delete)

2.:force 伪类选择器：

<divclass="three"><inputtype="text"><inputtype="text"><inputtype="text"><inputtype="text"></div>.three>input:focus { color: red; }

此时被选中的表单的字体就会变成红色

常用元素属性

字体属性

设置字体:

<style> .font-family .one{font-family:'Microsoft YaHei';}.font-family .two{font-family:'宋体';}</style> <div class="font-family"> <div class="one"> 这是微软雅黑 </div> <div class="two"> 这是宋体 </div> </div>

多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体.)

如果字体名有空格, 使用引号包裹.

设置大小

p { font-size: 20px; }

设置粗细:

p { font-weight: 700; 或者 font-weight: bold; }

取值范围是100到900 bold表示700 normal表示400

文本样式:

/* 设置倾斜 */font-style:italic;/* 取消倾斜 */font-style:normal;

文字属性

设置文本颜色:

这三种是一样的color:red;//单词形式color:#ff0000;//十六进制形式color:rgb(255,0,0);//RGB形式

鼠标悬停在vscode的颜色上, 会出现颜色选择器, 可以手动调整颜色

文本对齐:控制文字水平方向的对齐.

text-align:center;//居中对齐text-align:left;//左对齐text-align:right;//右对齐

文本装饰:

text-decoration:[值];常用取值:- underline 下划线. - none 可以给 a 标签去掉下划线. - overline 上划线. - line-through 删除线

文本缩进:控制段落的 首行 缩进

text-indent:[值];- 单位可以使用 px 或者 em. - 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小. - 缩进可以是负的,表示往左缩进.

行高:–行高指的是上下文本行之间的基线距离

–行高 = 上边距 + 下边距 + 字体大小

line-height:[值];

HTML 中展示文字涉及到这几个基准线: - 顶线 - 中线 - 基线 - 底线

内容区: 底线和顶线包裹的区域

引申:行高等于元素高度, 就可以实现文字居中对齐

背景属性

背景颜色:–默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.

background-color:[指定颜色]

背景图片:–url 上可以加引号, 也可以不加

background-image:url(...);

背景颜色和背景图片可以同时存在. 但是背景图片要在背景颜色的上方.

背景平铺:

background-repeat:[平铺方式]重要取值:-repeat:平铺(默认)-no-repeat:不平铺 -repeat-x:水平平铺 -repeat-y:垂直平铺

背景位置:

background-position:x y;

参数有三种风格:

1.方位名词: (top, left, right, bottom)

2.精确单位: 坐标或者百分比(以左上角为原点的左手直角坐标系)

3.混合单位: 同时包含方位名词和精确单位

注意

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)

如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中.)

如果参数是精确值, 则的的第一个肯定是 x, 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)

如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.

如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

背景尺寸:

background-size:length|percentage|cover|contain;-可以填具体的数值:如 40px 60px 表示宽度为 40px,高度为 60px -也可以填百分比:按照父元素的尺寸设置. -cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 -contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域.

圆角矩形:

border-radius:length;想生成圆形:填50%想生成圆角矩形:填50px也可以四个角分别设置:(左上 → 右上 → 右下 → 左下)border-radius:10px 20px 30px 40px;

元素的显示模式介绍

主要有块级元素和行内元素

块级元素:常见的有h1 - h6 p div ul ol li

特点: 1.独占一行 2.高度, 宽度, 内外边距, 行高都可以控制. 3.宽度默认是父级元素宽度的 100% (和父元素一样宽) 4.是一个容器(盒子), 里面可以放行内和块级元素. --但是文字类的元素内不能使用块级元素(比如:p和div),而且不是所有块级元素都能嵌套任意元素

行内元素(内联元素):常见的有a strong b em i del s ins u span

特点: 1.不独占一行, 一行可以显示多个 2.设置高度, 宽度, 行高无效 3.左右外边距有效(上下无效). 内边距有效. 4.默认宽度就是本身的内容 - 行内元素只能容纳文本和其他行内元素, 不能放块级元素

改变显示模式:

-display:block 改成块级元素 -display:inline 改成行内元素 -display:inline-block 改成行内块元素

盒模型

每个HTML元素都相当于是一个矩形的盒子(由边框border内容content内边距padding外边距margin构成)

边框:

基本属性:

-粗细:border-width -样式:border-style,默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框 -颜色:border-color 支持简写,没有顺序要求border:1px solid red;可以改四个方向的任意边框. border-top/bottom/left/right

例子:border:1px solid blue;border-top:red;

注意:边框是会撑大盒子的，如果不想的话就

*{box-sizing:border-box;}

内边距:用padding来进行调整

默认内容是顶着边框来放置的. 用 padding 来控制这个距离 可以给四个方向都加上边距 - padding-top - padding-bottom - padding-left - padding-right 使用box-sizing:border-box 属性也可以使内边距不再撑大盒子

复合写法:可以把多个方向的 padding 合并到一起.padding:5px;表示四个方向都是 5pxpadding:5px 10px;表示上下内边距 5px,左右内边距为 10pxpadding:5px 10px 20px;表示上边距 5px,左右内边距为 10px,下内边距为 20pxpadding:5px 10px 20px 30px;表示 上5px,右10px,下20px,左30px（顺时针）

外边距:(使用margin)

基础写法 控制盒子和盒子之间的距离.可以给四个方向都加上边距 - margin-top - margin-bottom - margin-left - margin-right 复合写法的规则跟padding一样 margin 是盒子外部的间距，它本身就不会撑大盒子的 width/height，只会影响盒子与盒子之间的距离

margin还能用来让块级元素居中:使用前提:元素必须手动设置了width/* 写法1：分开写左右边距 */margin-left:auto;margin-right:auto;/* 写法2：简写所有边距为auto */margin:auto;/* 写法3：最常用、最推荐的写法 */margin:0 auto;

去除浏览器默认样式的方法:

浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.

为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式.

*{margin:0;padding:0;}

弹性布局(flex)

弹性布局是用来专门解决网页里「元素怎么排、怎么对齐、怎么均匀分布」的问题

display:flex //能让元素自动并排，不用写浮动 轻松实现水平 / 垂直居中 让元素均匀分布在父容器里

被设置为display:flex属性的元素, 称为 flex container

它的所有子元素立刻成为了该容器的成员, 称为 flex item – flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

注意:当父元素设置为display: flex之后，子元素的float,clear,vertical-align都会失效。

flexcontainer的常用属性:justify-content 设置主轴上的子元素排列方式. 使用之前一定要确定好主轴是哪个方向属性取值:| 值 | 描述 |----------------|------------------------------------ | flex-start | 默认值。项目位于容器的开头。 | flex-end | 项目位于容器的结尾。 | center | 项目位于容器中央。 | space-between | 项目在行与行之间留有间隔。 | space-around | 项目在行之前、行之间和行之后留有空间。 align-items 设置侧轴上的元素排列方式 在上面的代码中,我们是让元素按照主轴的方向排列,同理我们也可以指定元素按照侧轴方向排列. | 值 | 描述 |----------------|------------------------------------------ | stretch | 默认值。行拉伸以占据剩余空间。 | center | 朝着弹性容器的中央对行打包。 | flex-start | 朝着弹性容器的开头对行打包。 | flex-end | 朝着弹性容器的结尾对行打包。 | space-between | 行均匀分布在弹性容器中。 | space-around | 行均匀分布在弹性容器中,两端各占一半。注意:align-items 只能针对单行元素来实现. 如果有多行元素,就需要使用 align-content