# CSS代码书写位置

# CSS代码书写位置

# 如何开始编写一个网站

# 练习:努比亚官网

# 透明色 transparent

# 伸缩布局

# 元素透明度 opacity

1.行内标签

可以将CSS代码写到开始标签中

我是div

2.内嵌样式

可以在一对head标签当中写上一对style标签,然后再style标签中编写CSS代码

div{

color:red;

}

3.外链样式 - 企业开发中一般使用

可以单独新建一个css文件,把CSS代码写到这个文件中,然后通过link标签把这个文件和.html文件关联起来

4.导入样式

可以单独新建一个css文件,把CSS代码写到这个文件中,然后通过@import把这个文件和.html文件关联起来

import

外链样式和导入样式区别:

外联样式时通过link标签关联而导入样式是通过@import关联而@import是CSS2.1推出的,所以有兼容问题

2.外链样式是显示界面的时候,会先加载CSS样式,再加载结构,所以用户看到界面时一定已经设置了样式

导入样式在显示界面的时候,会先夹在CSS样式,再加载结构,所以用户看到界面时还没加载样式,影响用户体验

# 如何开始制作一个网页

1.编写网站要做的第一件事情

创建站点文件夹,并且创建一些子文件夹和子文件

注意点:创建站点文件夹可以写中文

但是站点文件夹下面的子文件夹和子文件不能出现中文

2.重置所有默认的样式和设置一些全局样式,并且将设置样式的css文件和对应的界面关联起来

(2.1 清空边距,清空样式)

(2.2 设置全局样式 字体 字体颜色 背景颜色)

练习:努比亚

如果图片宽度大于父元素的宽度,如何让图片居中显示?

注意点:

1.如果图片的宽度大于父元素的宽度,不能使用margin: 0 auto;或者text-align: center;使图片居中

2.如果图片宽度大于父元素宽度,可以使用定位流让图片居中

但是定位流的弊端也比较明显:1.需要写三行代码 2.必须知道图片的宽度

3.如果图片的宽度大于父控件的宽度,也可以使用奇淫技巧:

父元素设置text-align: center;

给需要居中的元素添加margin: 0 -100%;

透明色  transparent

border: 2px solid transparent;

伸缩布局:

display:flex;

justify-content: space-between;

元素透明度

opacity: 0;

特点:子元素也会跟着透明