9.25-CSS样式以及结构布局

今天老师讲解了关于CSS样式以及用div来给网页布局

CSS样式的添加有3种

1.内联式 (属性式)语法： style="样式：样式值；"
优点：控制精确
缺点：不灵活，代码冗余。
2.内嵌式 语法：
<style type="text/css"
选择器{ 样式：样式值；}
</style>
优点：比较灵活，代码精简
缺点：不能精确的控制样式
3.外部样式表 <link rel="stylesheet" href="">
优点：使html代码看起来精简
缺点：不能精确的控制样式
4.注释的语法 /* 注释的内容 */

 

我的用法是利用内嵌式语法，先把样式写出来，然后剪切到相对应的CSS文件里，然后再用link导入，感觉这样比较方便。

 

关于标签选择器

<!-- 标签选择器
1.标签选择器： 标签名{ 样式}
2.id选择器： #id名{ 样式}
3.类选择器： .class名{ 样式}
4.复合选择器：

a.逗号（，）代表并列同时加上样式；
b.空格（ ）下级找
c.点（.） 同一级别的元素里面选
标签名.class名

 

前3点已经是较为了解了，主要是第四点，

如果是相同class，有相同的CSS样式，那么用逗号处理更加方便，其次如果这些class里面有需要单独加样式的也可以加上，例如

　　.a1,.a2,.a3,.a4
    {
        font-size:20px;
        color: orange;
    }
　　.a1
    {
        border: 5px solid red;
    }    

<div class="a1">北京</div>
<div class="a2">上海</div>
<div class="a3">广州</div>
<div class="a4">深圳</div>

这样显示出来的这样的

 

 很直观。

 

最后最重要的一点是格式布局

有三点

position: fixed;

相对于屏幕固定 必须设置top、left、right、bottom

position: absolute;

绝对定位
1.只有本身：在页面中定位（根据top、left、right、bottom）
2.有嵌套关系
（a） 嵌套他的标签没有position 还是在页面中定位
（b） 嵌套他的标签有position 那就在嵌套他的标签里面定位

position: relative;

相对定位

被谁包着就相对于谁定位

 

 

这三点逻辑顺序要弄清楚，只要理顺了思路，布局起来虽然麻烦点，要调整位置，但是方法都是一样的，只要能布局出来一个，剩下的就都能布局出来。

z-index:10;   是层与层的关系，两块div重叠的话，用这个可以使之分层。

转载于:https://www.cnblogs.com/wang95529/p/7593311.html