CSS样式

今天学习的CSS非常喜欢用外部引入，比较干净整洁。

内嵌的CSS比较方便但是看起来比较乱。

<!--css样式的嵌入
    1.行间样式:在标签中添加<style>属性
      格式:标签名 style="样式:样式值1;样式2=样式值2"
    2.内嵌样式：在head标签中添加一个
    <style></style>,将样式写在style标签中
    选择器：须要给设置设置id属性或者class属性
        1.id选择器：必须要给标签设置id属性
          例如：id="s1"
          <style>
              #s1{
                  样式1：样式值1;    
                  样式2：样式值2
                  }
          </style>
       2.class选择器：必须要给标签设置class属性
       class：翻译的意思是一类的意思
       例如class="pp"
               .pp{
                   样式1：样式值1;    
                  样式2：样式值2
                  }
    3.元素（标签）选择器
                标签名{
        样式1：样式值1;    
        样式2：样式值2
    }
   
   4
      1 选择器之间的关系:
       并列关系：
       选择器1,选择器2共享样式 必须用逗号分隔！
       选择器1,选择器2{
            样式1:样式值1;
            样式2:样式值2;
       父子关系                必须用空格    分隔！
            选择器1 选择器2{  
            样式1:样式值1;
            样式2:样式值2;
     2选择器之间的优先级：
    id选择器>class选择器>元素选择器
    
  5
      外部引入：
              新建 XXX.CSS文件
              在html文件中的head标签中引入CSS文件
          格式：<link src="css文件路径">
-->

 

 CSS一些属性

   {
/*    下划线*/
/*    text-decoration: underline;*/
/*    删除线*/
/*    text-decoration: line-through;*/
/*    定划线*/
/*    text-decoration: overline;*/
/*    转换大小写*/
/*    text-transform: uppercase;*/
/*    将所有单词的首字母大写*/
    text-transform: capitalize;
/*    首行缩进*/
    text-indent: 20px;
/*    文本水平对齐*/
    text-align:center;
    line-height: 150px;       文字占比例行高
    background: red;        
}

<!--span标签用于包裹文字,给文字添加样式-->
<span style="color: #9C10AA;font-size: 20px">bbo</span>
<!--id选择器-->
<p id="p1">这是一个段落标签</p>
<!--class选择器-->
<p class="qq">这是一个段落标签</p>
<p class="qq">这是一个段落标签</p>
<p class="qq">这是一个段落标签</p>
<!--元素（标签名）选择器    例如：span{background: red;}-->
<span>s1</span>
<span>s2</span>
<span>s3</span>

 

转载于:https://www.cnblogs.com/pandam/p/10623036.html