3-6CSS揭秘阅读笔记第一章:引言

标签: 读书摘要

  1. 写CSS的要求?--保证DRY(don't repeat yourself ),可维护、灵活性、轻量级
  2. 不同浏览器表现有细微差异,需要加浏览器前缀,把标准语法排在最后。可以在书写css时,提供回退机制回退样式。最常见的前缀Firefox的-moz-、IE的-ms-、opera的-o-,以及safari和chrome的-webkit-.
  3. CSS编写技巧--

       尽量减少代码重复:


我来写这个框的思路:
 .button{
		width:200px;
		height:100px;
		padding:15px 10px;
		color:#fff;
		font-size: 20px;
		line-height: 30px;
        border: 1px solid yellow;
        box-shadow: 0 5px 10px grey;
        text-align: center;
        text-shadow: 0 -1px 1px #355166;
        background: yellow;
	}

书上的写法:
body{font-size: 16px;}
    .button{
    	padding: .3em .8em;
    	border: 1px solid rgba(0,0,0,.1);
    	background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
    	border-radius: .2em;
    	box-shadow: 0 .5em .25em rgba(0,0,0,.5);
    	color:white;
    	text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
    	font-size: 125%;
    	line-height: 1.5;
    }

对比分析:

1.没有width和height ,可以利用width:auto的自适应效果自动填充
2.不要写绝对长度,用比值改用em单位,修改某一处时容易维护,不需要每一处都修改
浏览器里默认字体大小是16px;字号和其他尺寸与父级字号相关联,用em;如果要和<html>的字号相关联可以使用rem单位。
3.颜色值用rgba或者hsla值方便实现相对的调整变化 根据本身的颜色自适应

hsla的用法:语法:取值:<length> :Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;

<percentage> :
Saturation(饱和度)。 取值为0%到100%之间的值;
<percentage> :
Lightness(亮度)。 取值为0%到100%之间的值;
<opacity> :
alpha(透明度)。 取值在0到1之间;

    

    

1.代码易维护和代码量少不可兼得
{border-width:10px;
border-left-width:0; }
比 { border-width:10px 10px 10px 0;}
可读性以及可修改性更好

2.currentColor
从SVG借鉴的,但是没有绑定固定颜色,一直被解读为color,成为了CSS中的变量。
用法:例子让所有水平分割线(<hr>元素)自动与文本颜色保持一致,
hr{
height: 0.5em;
background: currentColor;
}
如果没有给边框指定颜色,它自动继承body中文本颜色

3.inherit可以用在任何css属性中 总是绑定到父元素的计算值 (伪元素:取其宿主元素)


这个样式是黄色部分小箭头的样式
	.callout{
		position: relative;
	}
	.callout::before{
		content: "";
		position:absolute;
		top:-.4em;left: 1em;
		padding: .35em;
		background: inherit;
		border: inherit;
		border-right: 0;
		border-bottom: 0;
		transform:rotate(45deg);
	}
人的视觉有局限性,在完美居中的情况下,实际上并不居中,要把中心点往上挪一点,才能达到居中的视觉效果 ,如果要四面的边距看起来基本上一致 需要减少padding-top/bottom的内边距


关于响应式网页设计:
使用媒体查询会增加使用成本,媒体查询的断点应该有设计自身来决定,不由具体设备决定,以下建议避免不必要的媒体查询
1.使用百分比长度取代固定长度 或者尽量尝试使用与视口相关单位(vw、vh、vmin和vmax),它们的值解析为视口宽度或高度的百分比;
2.在加大分辨率下得到固定宽度时,使用max-width而不是width,因为它可以适应较小分辨率,无需媒体查询
3.要为替代元素设置一个max-width:100%;
4.如果背景图片要完整铺满整个容器 要设置background-size:cover;
5.当图片或其他元素以行列式进行布局,让视口的宽度决定列的数量。用弹性盒布局或者display:inline-block加上常规的文本折行行为都可以实现
6.在使用多列文本时,指定列宽column-width而不是指定列数column-count,这样就可在较小屏幕上自动显示为单列布局

实现思路是尽可以努力实现弹性可伸缩的布局,并在媒体查询的各个断点区间内指定相应尺寸。

             
合理使用简写
background:red;
background-color:red;
这两条声明并不等价,background:#abc; 前一种可以确保得到红色背景,
后一条可能会和背景图片一起相互作用;
要明确的覆盖某个具体的展开式属性并保留其他相关样式 需要用展开式属性。

             

    改写成为

   

  

在background简写属性中指定background-size,需要同时提供一个background-position值,用/分隔;这是为了消除歧义,随时查阅语法
css预处理相关 ---书p14-16 用到时再查阅
版权声明:本文为tin0306原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tin0306/article/details/79464923

智能推荐

【机器学习基础】线性回归

                                                        &nbs...

08-Vue实现书籍购物车案例

书籍购物车案例 index.html main.js style.css 1.内容讲解 写一个table和thead,tbody中每一个tr都用来遍历data变量中的books列表。 结果如下: 在thead中加上购买数量和操作,并在对应的tbody中加入对应的按钮。结果如下: 为每个+和-按钮添加事件,将index作为参数传入,并判断当数量为1时,按钮-不可点击。 结果如下: 为每个移除按钮添加...

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

猜你喜欢

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...

解决Ubuntu中解压zip文件(提取到此处)中文乱码问题

在Ubuntu系统下,解压zip文件时,使用右键--提取到此处,得到的文件内部文件名中文出现乱码。 导致此问题出现的原因一般为未下载相应的字体。 解决方案: 在终端中使用unar命令。 需要注意的是系统需要包含unar命令,如果没有,采用如下的方式解决: 实例效果展示: 直接提取到此处: 使用 unar filename.zip得到的文件...

centos7安装mysql8.0.20单机版详细教程

mysql8.0之后与5.7存在着很大的差异,这些差异不仅仅表现在功能和性能上,还表现在基础操作和设置上。这给一些熟悉mysql5.7的小伙伴带来了很多困扰,下面我们就来详细介绍下8.0的安装和配置过程。 mysql在linux上的多种安装方式: 1.yum安装 由于centos默认的yum源中没有mysql,所以我们要使用yum安装mysql就必须自己指定mysql的yum源。在官网下载mysq...