一. CSS书写格式
1.行内样式
可以直接将CSS代码写到开始标签当中;
2.内嵌样式
可以在一对head标签当中写上一对style标签,然后在style标签中编写CSS代码;
3.外链样式 ---- 企业开发中一般使用外链样式
可以单独新建一个.css的文件,把CSS代码写到这个文件中,然后通过link标签把这个文件和.html文件关联起来;
4.导入样式
可以单独新建一个.css的文件,把CSS代码写到这个文件中,然后通过@import把这个文件和.html文件关联起来
外联样式和导入样式的区别
1.外链样式是通过link标签关联 , 而导入样式是通过@import关联 , 而@import是CSS2.1推出的,所以有兼容问题;
2.外链样式在显示界面的时候,会先加载CSS样式,再加载结构,所以用户看到界面时一定已经设置了样式 ; (用户看到的界面很漂亮)
导入样式在显示界面时,会先加载结构,再加载样式,所以用户看到界面的时候,不一定已经设置了样式 ; (先丑,后面才会变好看)
二. 编写网站要做的事情
1.编写网站要做的第一件事情
创建站点文件夹, 并且创建一些子文件夹和子文件
注意点:
创建站点文件夹可以是中文
但是站点文件夹下面的子文件夹和子文件不能出现中文
2.重置所有默认的样式和设置一些全局样式, 并且将设置样式的css文件和对应的界面关联起来
三. 如果图片的宽度大于父元素的宽度 , 设置图片居中
注意点:
1.如果图片的宽度大于父元素的宽度, 不能使用margin: 0 auto;或者text-align: center;让图片居中
2.如果图片的宽度大于父元素的宽度, 可以使用定位流让图片居中
但是定位流的弊端也比较明显. 1.需要写三行代码 2.必须知道图片宽度
3.如果图片的宽度大于父元素的宽度, 也可以使用<a>奇淫技巧</a>
margin: 0 -100%;
注意点: 父元素必须设置text-align: center;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 500px;
height: 500px;
margin: 0 auto;
border: 5px solid red;
box-sizing: border-box;
text-align: center; // 图片的宽度大于父元素的宽度 设置图片居中 (第二步)
}
.son{
margin: 0 -100%; // 图片的宽度大于父元素的宽度 设置图片居中 (第一步)
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
</html>
五.设置透明色
transparent 透明的
border: 2px solid transparent;/*设置边框:透明*/
六. opacity: 0; 透明度
作用: 设置元素的透明度, 特点:子元素也会跟着透明;
网友评论