继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记
font-family:微软雅黑;/*字体名称(类型):微软雅黑,黑体,楷体,宋体*/font-size: 20px;/*字体大小*/font-weight: 600;/*字体加粗*/font-style: italic;/*字体样式*/
background: #00ff00 url(bgimage.gif) no-repeat fixed top;/*这是融合在一起的写法*/background-color: red;/*背景颜色*/background-image:url('图片路径');/*背景图片*/background-repeat:no-repeat;/*背景图片是否允许重复no-repeat repeat*/background-attachment:fixed;/*规定背景图像是否固定或者随着页面的其余部分滚动*/background-origin:content-box;/*规定背景图片的定位区域。*//*background-position:50% 50%;*//*background-position:800px 300px;*/background-position:right center;/*规定背景图像的位置*/background: inherit;/*规定应该从父元素继承 background 属性的设置。*/
.text{color:rebeccapurple;/*字体颜色*/direction: ltr;/*字体方向从右向左*//*rtl 从左向右*/line-height: 5px;/*设置行高*/letter-spacing:2px;/*设置字符间的间距,注意是字符,或者是字母*/text-align:center;/*设置文本的对齐方式*/text-decoration:overline;/*字体的修饰,如下划线underline,上划线overline,删除线line-through,也可以设置为none,无修饰*/text-indent:2em;/*首行缩进2个字,还有其他px的单位,%也可以*/text-shadow: rosybrown;/*文本阴影*/text-transform: lowerca;/*属性控制文本的大小写 *//*capitalize 文本中的每个单词以大写字母开头。*//*upperca定义仅有大写字母。*//*inherit规定应该从父元素继承 text-transform 属性的值。*/white-space: nowrap;/*属性设置如何处理元素内的空白 *//*nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。*//*pre空白会被浏览器保留。其行为方式类似 html 中的 <pre> 标签。*//*pre-wrap保留空白符序列,但是正常地进行换行。*/word-spacing:2px;/*属性增加或减少单词间挂职县长的空白,注意这是单词*/}
如果你已经看到了这里,那你应该也能继续往下面看,码字不易,点个关注吧。我的微信公众号:全栈学习笔记
边框属性比较重要
.border{border: 2px solid red;/*设置边框样式 宽度为2px 可见 红色 也可以分开写*/border-width: 2px;border-color: red;border-style: solid;/*分开写的border属性*//*也可以这样设置*/border-style:dotted solid double dashed;/*上边框是点状 右边框是实线 下边框是双线 左边框是虚线*/ /*none无边框。hidden与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。dotted点状边框。dashed虚线。。solid实线。double双线。inherit规定应该从父元素继承边框样式。*/border-radius: 5px;/*设置边框弧的大小,值越大,弧度越大*//*也可以对border的某一个边进行设置属性*/border-top: 2px solid red;}
看到这里你的心情可能是这样的
但是不要担心,如果你觉得很难懂的话,可以私聊我,我给你讲懂!
内边距
/*内边距*/.padding{padding: 2px;/*盒子模型的外边距,上左下右 各向内缩进2px*/padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;/*以上四句等于下面一句 上右下左的顺序 值是不一定相等的*/padding: 2px 2px 2px 2px;}
外边距
/*外边距*/.margin{margin: 2px;/*盒子模型的外边距,和padding的区别就是,margin是向外扩展的,padding是向内扩展的*/margin-top: 2px;margin-right: 3px;margin-bottom: 4px;margin-left: 6px;/*上面四句和下面一句也是等效的*/margin:2px 3px 4px 6px;}
如果你是新手的话可能对盒子模型,外边距内边距都不熟悉,这一部分内容在学的时候相对来说比较吃力!如果有问题可以私聊或者留言评论给我,我帮你解决哦!
这一部分用的比较少,了解一点就行
/*鼠标样式属性*/.cursor{cursor: pointer;/*光标呈现为指示链接的指针(赤壁之战一只手)*//*help此光标指示可用的帮助(通常是一个问号或一个气球) text此光标指示文本。 wait此光标指示程序正忙(通常是一只表或沙漏 default默认光标(通常是一个箭头) auto默认。浏览器设置的光标。*/}
/*列表属性*/.list{list-style: circle;list-style:square inside url('/test/1.png');list-style-type: disc;/*设置列表项标记的类型*//*disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。*/list-style-image: url();/*属性使用图像来替换列表项的标记*/list-style-position: inside;/*属性设置在何处放置列表项标记*/}
定位属性一般来说用得比较多,希望你能看懂下面的代码
.position{position: relative;left: 2px;top: 2px;}
代码中的意思是相对定位,相对定位就是说,相对于我本身元素的位置,再对这个元素进行移动。所以以上代码的意思就是相对于这个元素原来所在的位置,再向右移动2px,向下移动2px,要注意这一点,代码中写的left,top 自我发展规划都是正值,也就是向相反的方向移动。而不思向左移动2px,向上移动2px.
.positiona{position: absolute;left: 20px;right: 20px;}
以上为绝对定位,绝对定位是相对于整个页面来说的,不管元素本身所在的位置。页面上的最左上角代表(0,0)坐标,绝对定位的起始位置也是这里。所以上面这段代码实现的就是距离左边20px,距离上边20px,这样理解可能比上面我说的以相反的方向移动要简单很多吧。
css里面浮动用的还是挺多的,要好好学哦!不会的关注我的公众号,我会教你的哦!公众号:全栈学习笔记
码字太难了!给个关注吧!
说实话,浮动这一块讲着就很麻烦了,这里只介绍一下,后面出一期上面说的盒子模型的时候专门讲一下浮动,不然讲着可能会有一点抽象,你也觉得不好懂!下期我尽量讲的详细一点。
图文并茂,哈哈,这一期基本上都是代码文字叙述。作为一个知识的存储。往下面看!
/*浮动*/.float{float: right;}
这句话的意思是将这个块(暂时称为一个块吧)浮动到右边,或是移动。浮动涉及的东西挺多的,有时候能用浮动,有时候用浮动比较麻烦!
1.第一种方式
/*清除浮动*/.float{float: right;clear: both;}
2.第二种方式
父容器使用overflow:auto。
3.第三种方式
父容器使用伪类after和zoom。
伪类选择器还没讲过,争取这两天写一份英语入门学习详细的选择器文章。
滚动条设置
/*滚动条*/.overflow{overflow:scroll;/*属性规定当内容溢出元素框时发生的事情。*/ /* visible默认值。内容不会被修剪,内容溢出容器。hidden内容会被修剪,并且其余内容是不可见的,不会出现滚动条。scroll内容会被修剪,但是浏览器会显示滚动条。auto如果内容被修剪,则浏览器会显示滚动条。inherit规定应该从父元素继承 overflow 属性的值。 */overflow-y: hidden;/*设置竖直的滚动条*/overflow-x: scroll;/*设置横向的滚动条*/}
样式隐藏分为占位隐藏以及非占位隐藏
.display-z{/*隐藏*/display: none;/*以块级元素显示,宽高不可忽略*/display: block;/*此元素会被显示为内联元素,元素前后没有换行符*/display: inline; }
所谓非占位隐藏就是说,使用这个属性后,这个元素是不会被渲染,也就不会被看到。
/*占位隐藏*/.visibility{/*隐藏*/visibility: hidden;/*显示*/visibility: visible;}
而占位隐藏的意思就是,虽然这个元素我们看不到,但是他其实已经什么月球被渲染出来了,只是被隐藏了,就像科幻片里面的隐身一样。
好了,这期的教程就到这里了!里面有一些重要很实用的东西没有具体的说,等css基础教程更新完成,就会出一些实用教程!希望大家支持哦!
本文发布于:2023-04-07 09:13:46,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/ea231d19f7fef98877352cade5e3fff9.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:css3系列.doc
本文 PDF 下载地址:css3系列.pdf
留言与评论(共有 0 条评论) |