css3笔记系列-2.css中常见的样式属性和值
<h1 id="css3系列-2css中常见的样式属性和值">css3系列-2.css中常见的样式属性和值</h1><p>继续上一篇文章的继续了解css的基础知识，关注我微信公众号：全栈学习笔记</p>
<h2 id="css中常见的样式属性和值">css中常见的样式属性和值</h2>
<ol>
<li><strong>字体与颜色</strong></li>
<li><strong>背景属性</strong></li>
<li><strong>文本属性</strong></li>
<li><strong>边框属性</strong></li>
<li><strong>内外边距</strong></li>
<li><strong>鼠标光标属性</strong></li>
<li><strong>列表样式</strong></li>
<li><strong>定位属性</strong></li>
<li><strong>浮动和清除浮动</strong></li>
<li><strong>滚动条</strong></li>
<li><strong>样式显示和隐藏</strong></li>
</ol>
<h3 id="字体与颜色">字体与颜色</h3>
<pre><code>font-family:微软雅黑;/*字体名称（类型）：微软雅黑，黑体，楷体，宋体*/
font-size: 20px;/*字体大小*/
font-weight: 600;/*字体加粗*/
font-style: italic;/*字体样式*/
</code></pre>
<h3 id="背景属性">背景属性</h3>
<pre><code>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 属性的设置。*/
</code></pre>
<h3 id="文本字体属性">文本字体属性</h3>
<pre><code>.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;/*属性增加或减少单词间的空白,注意这是单词*/
}
</code></pre>
<p>如果你已经看到了这里，那你应该也能继续往下面看，码字不易，点个关注吧。我的微信公众号：全栈学习笔记<br>
<img src="https://img-blog.csdnimg.cn/20200323171551269.jpg#pic_center"></p>
<h3 id="边框属性">边框属性</h3>
<p>边框属性比较重要</p>
<pre><code>.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;
}
</code></pre>
<p>看到这里你的心情可能是这样的<br>
<img src="https://img-blog.csdnimg.cn/20200323171627443.jpg#pic_center"><br>
但是不要担心，如果你觉得很难懂的话，可以私聊我，我给你讲懂！</p>
<h3 id="内外边距">内外边距</h3>
<p>内边距</p>
<pre><code>/*内边距*/
.padding{
padding: 2px;/*盒子模型的外边距，上左下右 各向内缩进2px*/
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
/*以上四句等于下面一句上右下左的顺序 值是不一定相等的*/
padding: 2px 2px 2px 2px;
}
</code></pre>
<p>外边距</p>
<pre><code>/*外边距*/
.margin{
margin: 2px;/*盒子模型的外边距，和padding的区别就是，margin是向外扩展的，padding是向内扩展的*/
margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 6px;
/*上面四句和下面一句也是等效的*/
margin:2px 3px 4px 6px;
}
</code></pre>
<p>如果你是新手的话可能对盒子模型，外边距内边距都不熟悉，这一部分内容在学的时候相对来说比较吃力！如果有问题可以私聊或者留言评论给我，我帮你解决哦！</p>
<h3 id="鼠标光标属性">鼠标光标属性</h3>
<p>这一部分用的比较少，了解一点就行</p>
<pre><code>/*鼠标样式属性*/
.cursor{
cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
/*help 此光标指示可用的帮助（通常是一个问号或一个气球）
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
*/
}
</code></pre>
<h3 id="列表样式">列表样式</h3>
<pre><code>/*列表属性*/
.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;/*属性设置在何处放置列表项标记*/
}
</code></pre>
<h3 id="定位属性">定位属性</h3>
<p>定位属性一般来说用得比较多，希望你能看懂下面的代码</p>
<h4 id="相对定位">相对定位</h4>
<pre><code>.position{
position: relative;
left: 2px;
top: 2px;
}
</code></pre>
<p>代码中的意思是相对定位，相对定位就是说，相对于我本身元素的位置，再对这个元素进行移动。所以以上代码的意思就是相对于这个元素原来所在的位置，再向右移动2px，向下移动2px，要注意这一点，代码中写的left，top 都是正值，也就是向相反的方向移动。而不思向左移动2px,向上移动2px.</p>
<h4 id="绝对定位">绝对定位</h4>
<pre><code>.positionA{
position: absolute;
left: 20px;
right: 20px;
}
</code></pre>
<p>以上为绝对定位，绝对定位是相对于整个页面来说的，不管元素本身所在的位置。页面上的最左上角代表(0,0)坐标，绝对定位的起始位置也是这里。所以上面这段代码实现的就是距离左边20px,距离上边20px，这样理解可能比上面我说的以相反的方向移动要简单很多吧。</p>
<h3 id="浮动和清除浮动">浮动和清除浮动</h3>
<p>css里面浮动用的还是挺多的，要好好学哦！不会的关注我的公众号，我会教你的哦！公众号:全栈学习笔记<br>
码字太难了！给个关注吧！</p>
<p>说实话，浮动这一块讲着就很麻烦了，这里只介绍一下，后面出一期上面说的盒子模型的时候专门讲一下浮动，不然讲着可能会有一点抽象，你也觉得不好懂！下期我尽量讲的详细一点。<br>
图文并茂，哈哈，这一期基本上都是代码文字叙述。作为一个知识的存储。往下面看！</p>
<h4 id="浮动">浮动</h4>
<pre><code>/*浮动*/
.float{
float: right;
}
</code></pre>
<p>这句话的意思是将这个块（暂时称为一个块吧）浮动到右边，或是移动。浮动涉及的东西挺多的，有时候能用浮动，有时候用浮动比较麻烦！</p>
<h4 id="清除浮动">清除浮动</h4>
<p>1.第一种方式</p>
<pre><code>/*清除浮动*/
.float{
float: right;
clear: both;
}
</code></pre>
<p>2.第二种方式</p>
<p>父容器使用overflow：auto。</p>
<p>3.第三种方式</p>
<p>父容器使用伪类after和zoom。</p>
<p>伪类选择器还没讲过，争取这两天写一份详细的选择器文章。</p>
<h3 id="滚动条">滚动条</h3>
<p>滚动条设置</p>
<pre><code>/*滚动条*/
.overflow{
overflow:scroll;/*属性规定当内容溢出元素框时发生的事情。*/
/*
visible 默认值。内容不会被修剪，内容溢出容器。
hidden 内容会被修剪，并且其余内容是不可见的,不会出现滚动条。
scroll 内容会被修剪，但是浏览器会显示滚动条。
auto 如果内容被修剪，则浏览器会显示滚动条。
inherit 规定应该从父元素继承 overflow 属性的值。
*/
overflow-y: hidden;/*设置竖直的滚动条*/
overflow-x: scroll;/*设置横向的滚动条*/
}
</code></pre>
<h3 id="样式显示和隐藏">样式显示和隐藏</h3>
<p>样式隐藏分为占位隐藏以及非占位隐藏</p>
<h4 id="非占位隐藏">非占位隐藏</h4>
<pre><code>.display-z{
/*隐藏*/
display: none;
/*以块级元素显示，宽高不可忽略*/
display: block;
/*此元素会被显示为内联元素，元素前后没有换行符*/
display: inline;
}
</code></pre>
<p>所谓非占位隐藏就是说，使用这个属性后，这个元素是不会被渲染，也就不会被看到。</p>
<h4 id="占位隐藏">占位隐藏</h4>
<pre><code>/*占位隐藏*/
.visibility{
/*隐藏*/
visibility: hidden;
/*显示*/
visibility: visible;
}
</code></pre>
<p>而占位隐藏的意思就是，虽然这个元素我们看不到，但是他其实已经被渲染出来了，只是被隐藏了，就像科幻片里面的隐身一样。</p>
<p>好了，这期的教程就到这里了！里面有一些重要很实用的东西没有具体的说，等css基础教程更新完成，就会出一些实用教程！希望大家支持哦！<br>
<img src="https://img-blog.csdnimg.cn/20200323171701850.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VueGlhb2JhaTEyMw==,size_16,color_FFFFFF,t_70#pic_center"></p>
</div>
<div id="MySignature" role="contentinfo">
心诚不灭<br><br>
来源：https://www.cnblogs.com/swzx-1213/p/12553476.html
頁:
[1]