CSS
- CSS简介
- CSS相关内容
- 目前我所学习的关于CSS以及运用
1.CSS简介:
指层叠样式表 ,这些样式定义如何显示HTML元素。所采用的样式表使得其更容易管理且提高了代码的简洁度,提高了代码的复用率,也提高了整体的开发效率。
2.CSS相关内容
语法(CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,选择器通常是您需要改变样式的 HTML 元素。)
(1) 区别选择器:(#-id
选择器和.-class
选择器)
(2) 背景:
background-color
background-imageL:{background-image:url('bgdesert.jpg');}
background-repeat("x"或“y”)
background-attachment
/*(设置背景图像是否固定或者随着页面的其余部分滚动,分别有*/
“local”,"fixed",而“scroll”作为默认的。)
background-position(right,left,center)
(3) TEXT文本
/*用来设置或删除文本的装饰 */
a {text-decoration:none;}
字母转换:text-transform:
/*用来指定在一个文本中的大写和小写字母*/
(uppercase,lowercase,capitalize)
首行缩进:
p {text-indent:50px;}
(4)字体
font-family (Serif, Sans-serif, Monospace)/*指定文本的字体系列*/
font-style(normal,oblique,italic)/*指定文本的字体样式*/
font-variant /*以小型大写字体或者正常字体显示文本。*/
font-size /*指定文本的字体大小*/
font-weight /*指定字体的粗细。*/
(5)链接样式
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
!注意顺序关系
(6)盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) -/* 清除边框外的区域,外边距是透明的。*/
Border(边框) -/* 围绕在内边距和内容外的边框。*/
Padding(内边距) -/* 清除内容周围的区域,内边距是透明的。*/
Content(内容) -/* 盒子的内容,显示文本和图像。*/
(7)position定位
static
relative
fixed
absolute
sticky
div.static {
position: static;
border: 3px solid #73AD21;
}
(8)overflow(滚动条)
visible
hidden
scroll
auto/*如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。*/
inherit
(9)float(浮动)
意义:会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但也用在布局中。
清除浮动:可用clear
.text_line
{
clear:both;
}
(10)伪类
"first-line"/* 伪元素用于向文本的首行设置特殊样式。*/
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
"first-letter" /*伪元素用于向文本的首字母设置特殊样式*/
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
/*上面的例子会使所有 class 为 article 的段落的首字母变为红色。*/
*可结合多个伪元素使用
3.目前我学习的CSS以及运用
**-滚动定位,粘性定位:**
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: rgb(128, 0, 6);
border: 2px solid #8e6b23;
}
<div style="padding-bottom: 400px">
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
<p>奉眠颜值天花板</p>
class选择器的应用:
ol.a {
list-style-type: none;
color: red;
font-style: oblique;
margin: 0;
padding: 0;
}
ol.b {
list-style-type: square;
color: rgb(114, 241, 250);
}
ul.c {
list-style-image: ('sqpurple.gif');
color: rgb(137, 112, 144);
}
ul.d {
list-style-type: upper-roman;
color: rgb(47, 0, 255);
}
<ol class="a">
<li>镜玄</li>
<li>奉眠</li>
<li>丽娘</li>
</ol>
<ol class="b">
<li>镜玄</li>
<li>奉眠</li>
<li>丽娘</li>
</ol>
<ul class="c">
<li>镜玄</li>
<li>奉眠</li>
<li>丽娘</li>
</ul>
<ul class="d">
<li>镜玄</li>
<li>奉眠</li>
<li>丽娘</li>
</ul>
**Text文本的属性使用:**
p.kl::first-letter {
color: #ff0000;
font-size: x-large;
}
<p class="kl">
1、弄权一时,凄凉万古
栖守道德者,寂寞一时;依阿权势者,凄凉万古。达人观物外之物,思身后之身,守受一时之寂寞,毋取万古之凄凉.
一个坚守道德规范的人,虽然有时会遭受短暂的冷落;可那些依附权势的人,却会遭受永久的凄凉。大凡一个胸襟开阔的聪明人,能重视物质以外的精神价值,并且又能顾及到死后的名誉问题。所以他们宁愿承受一时的冷落,也不愿遭受永久的凄凉。
2、抱朴守拙,涉世之道
涉世浅,点染亦浅;历事深,机械亦深。故君子与其练达,不若朴鲁;与其曲谨,不若疏狂。
一个刚踏入社会的青年人阅历虽然很短浅,但是所受各种社会不良习惯的感染也比较少;一个饱经事故而阅历很广的人,各种恶习也随着增加。所以一个有修养的君子,与其讲究做事的圆滑,倒不如保持朴实的个性;与其事事小心谨慎委曲求全,倒不如豁达一点才不会丧失纯真的本性。
</p>