css3必须了解的知识 css中常见的样式属性和值

2023-01-30 0 817

竭尽全力上一则该文的竭尽全力介绍css的基本科学知识 全栈自学讲义,相同网络平台相同的我!

css中常用的式样特性和值

手写体与色调大背景特性文本特性前面板特性内外面距滑鼠母吕氏特性条目式样功能定位特性自由浮动和去除自由浮动快捷方式式样表明和隐藏手写体与色调

font-family:谷歌Segoe;/*手写体中文名称(类别):谷歌Segoe,图象,正体字,正体字*/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: lowercase;/*特性控制文本的大小写 */ /*capitalize 文本中的每个单词以大写字母开头。*/ /*uppercase 定义仅有大写字母。*/ /*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;}而占位暗藏的意思就是,虽然这个元素我们看不到,但是他其实已经被渲染出来了,只是被暗藏了,就像科幻片里面的隐身一样。

css3必须了解的知识 css中常见的样式属性和值
举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务