# CSS代码书写位置
# 如何开始编写一个网站
# 练习:努比亚官网
# 透明色 transparent
# 伸缩布局
# 元素透明度 opacity
1.行内标签
可以将CSS代码写到开始标签中
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;
特点:子元素也会跟着透明
