![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS学习笔记
从复合选择器开始的学习笔记
Leanne.T. N.
懒得写
展开
-
CSS中的属性书写顺序
一般来说,在开发中属性的书写遵循以下顺序:1.布局定位属性,如:display/position/float/clear等2.自身属性,如:width/height/margin/padding/border/background等3.文本属性,如:color/font/text-align/break-word等4.其他属性(包括CSS3中独有的一些属性),如:content/border-radius/box-shadow等...原创 2020-11-11 20:52:47 · 158 阅读 · 0 评论 -
CSS笔记-7:浮动
浮动的简单介绍浮动可以改变元素标签的排列方式,最典型的应用就是让多个行内块元素在一行内排列显示。一般来说,如果是多个盒子纵向排列用标准流即可,横向排列才需要考虑使用浮动。浮动的语法:选择器{ float: 属性值;},其中的属性有三个:none(元素不浮动,默认值)left(元素向左浮动)right(元素向右浮动)浮动的规则是创建浮动框将其移动到一边,直到左边缘或右边缘触及一个包含块或另一个浮动框的边缘。浮动需要注意的问题浮动元素会脱离标准流(脱标)1.脱离标准流的控制移动到指定位置,即为脱标原创 2020-11-08 19:01:17 · 268 阅读 · 0 评论 -
CSS笔记-6:CSS3之后的新增样式
圆角边框border-radius: length;这就是圆角边框的实现原理,在矩形角部使用一个圆去贴合,并将圆外的部分颜色去掉,就能形成一个圆角边框,所以上面的length是圆形的半径,数值越大,弧度也越大。若要做一个圆形的盒子,可以使用一个正方形里面加上一个半径长度为边长一般的圆形,后面的length既可以直接填入边长一半的数值,也可以直接写作50%。当要给不同的角设置不同的圆角值时,可以使用以下语法:border-radius: 10px 20px 30px 40px这时是从边框的左上原创 2020-11-05 22:13:11 · 195 阅读 · 1 评论 -
CSS笔记-5:网页的盒子模型
盒子模型就是将网页中的所有元素的布局看作盒子,通过将盒子的移动与修改样式并向里面填充内容来达到网页布局的效果。css中的盒子模型css盒子模型用于封装周围的html元素,包括边框、内外边距、实际内容上面的是一个css盒子的标准模型。borderborder控制的是盒子的边框,比如说要控制一个div盒子的边框,就可以用border的相关属性。border的属性包括border-width(边框的粗细)、border-style(边框的样式)、border-color(边框颜色)。border-原创 2020-11-02 23:47:30 · 254 阅读 · 0 评论 -
CSS笔记-4:CSS的层叠性、继承性、优先级
CSS的三大特性CSS的层叠性、继承性和优先级被称为CSS的三大特性。层叠性当相同的选择器设置了一类相同的样式,但是之间会发生冲突时,一个样式会覆盖另一个样式。CSS代码是从上往下执行的,因此,它会遵循就近原则,即哪一个样式离它近就会显示出哪一个样式。当然,如果样式没有发生冲突,就不会进行层叠。<style>div{ color:red; color:blue; }</style>.....<div></div>/*最终div会显示出原创 2020-10-31 20:01:02 · 144 阅读 · 0 评论 -
CSS笔记-3:背景
一个好的背景,可以让网站的整体观感更棒原创 2020-10-29 21:49:23 · 206 阅读 · 2 评论 -
CSS笔记-2:元素的显示模式
灵活运用不同的元素的显示模式会为后面的页面设计带来很多方便原创 2020-10-28 23:50:37 · 224 阅读 · 0 评论 -
CSS笔记-1:伪类选择器
伪类选择器是CSS复合选择器中的一种,用于向某些选择器添加一些特殊的效果,或是选择第n个元素。伪类选择器的书写是以:开头,这一点与之前的选择器.开头有所不同。链接伪类选择器a:link{} 选择所有未被访问过的链接,花括号中更改的属性就针对这一类链接a:visited{} 选择所有已被选择过的链接a:hover{} 选择鼠标指针位于其上的链接a:active{} 选择鼠标按下未弹起的链接,即鼠标点击瞬间链接的颜色注意事项:1.在书写过程当中如果四种样式都需要就要以LVHA顺序书写2原创 2020-10-25 11:14:40 · 416 阅读 · 0 评论