读《CSS那些事儿》笔记一

最新推荐文章于 2022-08-08 23:26:59 发布

辣姐什么鬼

最新推荐文章于 2022-08-08 23:26:59 发布

阅读量957

点赞数

分类专栏： web前端 css 文章标签： web前端 css

本文链接：https://blog.csdn.net/liona_koukou/article/details/52047891

版权

web前端同时被 2 个专栏收录

174 篇文章 6 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

学习css最好的方法就是不断地做，不断地想，不断地实践

Css的特点：

1、修饰页面文本、图片等页面元素，避免使用不必要的HTML元素

2、更有效地控制页面结构、页面布局

3、提高开发和维护的效率

Css的简写：

1、颜色的缩写：只能对十六进制形式缩写例如#FF00FF缩写为#F0F

2、单位值的省略：像0px可以缩写为0

3、内外补丁的简写：margin:0;表示所有边都是一个值，margin:0,0;上下一个值左右一个值，margin:0,0,0;分别表示上、左右，下的值，四个的话就是上、右、下、左

4、边框的缩写：border：1px solid gray;分别定义了宽度线型、颜色

5、背景的简写：背景颜色、背景图片、背景图片无平铺、背景图片固定不随页面滚动、定义背景图片位置；例子：background:#F00 url(“gif.jpg”) no-repeat fixed 0 0;

6、字体的简写：倾斜、大小写、粗细、大小、行高、字体，例如：font:italic small-caps bold 12px/140% sans-serif;

7、表的简写：有序列表ol和无序列表ul中的list-style属性，列表项标记的图片

、列表项标记的定位、定义预设标记形状例如：list-style:url() inside square;

通配符选择符*

类选择符 .class

包含选择符（派生选择符或后代选择器）p strong{}

子选择符（子对象选择符）body> strong{}

相邻选择符 p+strong{}同一个父级元素下p元素之后的那个strong元素两个元素必须紧紧相连

属性选择符E[attr]所有该标签元素E[attr=”value”]属性值为value的所有该元素标签E[attr~=”value”]属性值里具有空格符号隔开的字段的该标签元素E[attr|=value]属性值必须以value开始并且用连字符-分割的标签元素

ID选择符 #

伪类与伪对象，伪类：a:link{}；伪对象：p:before{content:””};p:after{content:””};分别在p标签前后添加相应内容。IE6/7对该伪对象不支持

后写的样式会覆盖前面写的样式

后代元素会继承父亲的css样式，但不是所有都继承，例如h系列的标签

选择符的权重级优先级别：可以将网页定义的样式分为4种，HTML、作者、用户、浏览器

添加!Important关键字声明的属性在优先级别是最高的

HTML中的css样式属性

作者编辑的css文件样式属性

用户设置的样式

浏览器默认的样式

优先级积分：标签选择符、伪类及伪对象优先级积分为1

类选择符、属性选择符优先级积分为10

ID选择符优先级积分为100

Style属性优先级积分为100

其他选择符，如通配符选择符等积分为0

根据以上统计每个选择符组合的分数，高的就优先

!important的应用：color:blue !important;

Css样式文件引入HTML页面有三种方式：直接写在标签的style属性中称为行间样式、写在<style></style>标签里，称为内嵌样式表、通过<link>方式外链css样式文件称为外联样式表、通过@important关键字导入外部css样式文件，通常称为导入样式表

外联：

<link rel="stylesheet" href="" type="text/css" media="all">

Meidia=all是针对所有设备，=screen是针对计算机显示器

导入样式表：

<style>
     @import url("");
</style>

导入样式表必须放在所有样式前面，虽然放在最前面但是是最后才解析的。这样很容易导致IE6中的闪屏或者在打开页面的过程中无样式直到页面加载完毕后才会加载样式的现象出现。因此建议不要使用导入样式表的方式。

对于大型的复杂站点一般将css样式文件分为两个部分：页面的全局定义及处理页面基本布局的css样式文件和处理细节方面的css样式文件。这样，在布局确定之后，很少需要再次更改布局结构，可以减少修改样式过程中意外地改动或者破坏页面布局的可能性。

在编写css代码的时候过程中，未发布站点之前可以在css中适当添加css注释，正式发布站点时就可以删除注释，减少文件的代码量。

关于浏览器兼容，IE下的css bug大都与hasLayout息息相关，它是IE特有的一个属性。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。很多情况下，我们把hasLayout的状态改成true就可以解决很大部分IE下显示的bug。hasLayout属性不能直接设定，只能通过设定一些特定的css属性来触发并改变hasLayout状态。

Display

启动hasLayout的值：inline-block

取消：其他值

Width/height

启动：除了auto以外

取消：auto

Position

启动：absolute

取消：static

Float

启动：left或right

取消：none

Zoom

启动：有值

取消：normal或空值

Zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。Zoom:1常用来除错

因hasLayout而导致的问题一般很容易发现，往往是内容出现错位甚至完全不可见。

优化css，所谓优化css一般就是将所有的代码写成一行，删除注释，去除空格，减少字节而已，可以利用编辑器达到

压缩图片，有软件，如PngOptimizer

具备辅助功能的软件-FastStone Capture，一般功能是量尺、取色、截图测宽高

盒模型：外补丁、边框、内补丁、内容

Doctype，文档类型简称DTD声明，用来指定页面所使用的XHTML或HTML的版本

IE浏览器存在两种渲染方式quirks怪异模式和standard标准模式

怪异模式下的IE浏览器盒模型的计算方式发生改变。下图第一个是在IE的怪异模式下，加上padding和border，总的宽和高不变，第二个是在标准模式下，加上padding和border总的宽高变大

网页布局的设计原则：

1、样式的重用性：利用class选择符重复将某个样式属性多次在网页中使用，以减少不断定义样式属性的繁琐工作，增强页面的可维护性。

2、浮动与清除浮动

3、定位方式的页面布局

4、过度使用ID选择符：过度使用将失去样式可重用性的特性

5、类选择符及ID选择符使用字母+数字方式命名：不使用这样的命名方式便于后期维护

6、合理使用css布局，不要盲目使用代替其他语言脚本的作用

下面是两列内容自适应的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #header,#footer{
            width:960px;
            height:30px;
            background-color:gainsboro;
        }
        #container{
            width:960px;
            /*height:250px;*/
            margin:10px 0;
        }
        .mainBox{
            float:left;
            width: 680px;
            /*height:250px;*/
            background:pink;
        }
        .sideBox{
            float:right;
            width: 270px;
            /*height:250px;*/
            background:lightblue;
        }
        /*#footer{*/
            /*clear:both;*/
        /*这样写footer与中间container的marign值会失效*/
        /*}*/
        /*加入下面这一段是为了中间两列实现高度自适应且与footer的margin值保持*/
        #container:after{
            clear:both;
            display:block;
            content:"";
        }
    </style>
</head>
<body>
<div id="header"></div>
<div id="container">
    <div class="mainBox">
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
        asfsdfasfdassdffaaffasdaf<br>
    </div>
    <div class="sideBox"></div>
</div>
<div id="footer"></div>
</body>
</html>

用背景图片实现两列等高，给两列的父元素添加背景图片（可以纵向重复）即Y轴重复

Background:url(image/bg.png) repeat-y 0 0;

关于字体：中文页面尽量首先定义“宋体”，其次为其他字体。英文页面就选择英文字体，可以考虑arial、verdana、tahoma等字体；中英结合的页面可考虑首先定义英文字体；特殊字体一律使用图片

首行缩进：text-indent：2em；用em是因为文字大小没有定，用2em才能正确首行缩进2

首字下沉：p:first-letter{font-size:2em;}可以再加上float：left；

图片最好用JPG格式，文件尺寸小，下载速度快，使得web页面可以在较短的时间内提供大量美观的图像。

网页中使用GIF格式的图标类很多，压缩比高，磁盘空间占用较少。

Png是目前保证最不失真的格式，汲取了GIF和JPG的优点。显示速度快，缺点是不支持动画应用效果。

设置背景图片不平铺，只在网页中显示一次。

Background-position：right bottom定位到div容器的右下角

Css sprite：减轻服务器的负载，提高网页的加载速度，大大减少了http请求的次数。

可以用在大型网站将许多单独的图片以有机的方式组合起来，从而便于维护和更新。图片之间通常会留出较大的空白，使得图片不会影响网页的内容。但css sprite弹性较差，受到定位等因素的制约，所以需要在可维护性和降低负载之间权衡利弊。