CSS学习

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>