![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端入门——CSS
ShyuDai
前端深入学习中
展开
-
CSS——样式使用、基本选择器、权值优先级
样式使用方法/*css行内样式*/<p style="color: red;">css行内样式</p>/*css内部样式*/<style type="text/css"> h1{ color: blue; }</style><body><h1>css内部样式</h1原创 2018-10-15 10:15:36 · 342 阅读 · 0 评论 -
CSS——字体、英文间距、大小写及下划线
字体属性font-weight(设置文字的粗细)font-style(设置文字倾斜加粗)font-variant(设置小型大写字母)font-family(设置字体)字体大小(相对单位)&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&a原创 2018-10-15 10:23:23 · 2894 阅读 · 0 评论 -
CSS——文字对齐方式
横向对齐方法1:单行块级元素水平居中只用添加text-align即可,如P标签,垂直居中vertical-align只适用于行内元素与单元格,所以设置行高与块高度相同即可text-align: center;方法2:普通的文本居中只要设置text-align即可,但是这个设置了P标签的宽度,则是在该宽度内进行居中,则应该设置margin进行居中 .content p ...原创 2018-10-15 10:40:51 · 28687 阅读 · 1 评论 -
CSS——盒子模型(margin\padding\border)
盒模型的宽高p{background-color: #ececec;width: 400px;}/*也可以设置百分比来进行宽度设置,是相对父元素的百分比宽度*/.two{max-width: 300px;}.three{min-width: 250px;}/*高度属性设置同理*/<body> <p>盒子模型宽度width:400px</p> &...原创 2018-10-15 12:05:30 · 566 阅读 · 0 评论 -
CSS——display属性
div,span { background-color: #00aaee; border: 1px #666 solid; } div{display: inline;} /*使块级元素变为内联元素 就不能设置宽高了,同时也没有上下外边距,但可以设置左右margin*/ span{display: block;} /*使行内元素变成块级元素*/...原创 2018-10-15 13:47:13 · 264 阅读 · 0 评论 -
CSS——背景(background)和列表(list-style)
背景background-attachment图片滚动条滚动div { width: 300px; height: 2000px; background-image: url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg); background-repeat: no-repeat; /*background-attach...原创 2018-10-15 14:01:30 · 614 阅读 · 0 评论 -
CSS——float浮动属性
float浮动 .div1{ width: 100px; height: 100px; background: red; float: left; } .div2{ width: 300px; height: 300px; ...原创 2018-10-15 14:13:01 · 452 阅读 · 0 评论 -
CSS——position属性
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。父元素必须有relative\absolute才可以fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” ...原创 2018-10-15 14:24:21 · 201 阅读 · 0 评论