发表于： 2019-02-28 23:09:50
1 659
今天完成的事情：
认识了盒子模型对于元素“摆放”时的基本概念，了解了css中有关颜色的定义方法，了解了css中一些常见的衡量单位，掌握了如何通过css为元素设置背景。
明天计划的事情：
尝试继续理解css派生选择器、id选择器、类选择器、属性选择器，继续学习更多的css样式，如果时间可能的话继续深入理解盒子模型的更详细内容。
遇到的问题：
css中的选择器可以理解为所对应html标签的名字吗？
css派生选择器、id选择器、类选择器、属性选择器一直没能理解？
父元素和字元素的理解：在html的<body></body>tag对之间的所有tag对应的元素都是<body></body>的子元素，根据css，子元素会继承父元素的属性。可以这么理解吗？
收获：
盒子模型（box model）可以做如下较为形象的理解：
在一张透明的方形塑料板上面放置一张方形纸板，纸板上面放着一个方形的蛋糕。纸板在塑料板的中央，蛋糕在纸板的中央。
将这样的一个整体与盒子模型做对照，内容（content）或者元素（element）就相当于蛋糕；填充或者叫内边距（padding）就相当于蛋糕外面露出来的纸板，也可以看作是元素的背景；纸板的边缘相当于边框（border）；纸板外面露出来的透明塑料板就相当于外边距（margin），外边距默认透明，不会遮挡在它后面的元素；对于方形蛋糕这一内容来说，它拥有高度（height）和宽度（width）这两个参数。
css中的颜色：使用红绿蓝三色光的组合来表示颜色，对红、绿、蓝每种色光分别取不同的分量组合就会得到不同的颜色。对这三种颜色分量的设置最低值为0，最高值为255，如果用十六进制来表述的话，每个颜色用两个数位，则最低值为00，最高值为FF。表示各种各样的颜色除了可以使用rgb(0,0,0)的表示方法或者用#000000这样的表示方法。
如果把红色标为0或360度，绿色标为120度，蓝色标为240度，其余度数对应夹在两种颜色之间的逐渐过渡，则有了色调（hue）、饱和度（saturation）和亮度（lightness）这样的色彩表示方法。饱和度和亮度都使用百分数，从0%到100%的饱和度一个颜色由纯灰向纯彩过渡，从0%到100%的亮度一个颜色由最暗纯黑色向最亮纯白色过渡。表示方法形如hsl(0,0%,0%)。
对于rgb和hsl色彩表示，如果在三个参数后面增加第四个参数不透明度（alpha），范围由0.0的完全透明到1.0的完全不透明，则得到rgba、hsla色彩表示方法。
一些颜色的英文名字在html和css颜色规范中得到了定义。
一些很早期的计算机支持的颜色数目只有256种，如果要考虑使用这样的计算机的用户时需要考虑在色彩的设计上偏向仅有216种颜色的网络安全色。
css中使用的一些常见的单位：百分比（%）、英寸（in）、厘米（cm）、毫米（mm）、当前字体尺寸（em）、磅（pt）、像素（px）。其中当前字体尺寸可以自动适应用户所使用的字体。
css为元素设置背景：设置背景色时可使用background-color属性，后面只跟一个颜色的参数。一个元素的background-color如果没有设置的话默认为透明（transparent），且一个元素的background-color只能针对自己，不能被这个元素之外的的其他tag构成所使用，即所谓“不能继承”。设置背景图像时需要使用background-image属性，参数为url()，如果没有设置默认为没有（none），它同样也不能继承。
如果在css中要对多个元素进行同样的属性声明，只需要在包含声明的大括号前面列举出所有的元素选择器，中间用逗号隔开即可。
今天还有一个收获就是自己学会了把手册当成字典一样的工具书在需要的时候去参考，而不是所有时刻都抱着手册依赖手册一句一句往下看，这样能使自己的学习效率得到提高。
返回列表
评论