zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    大一励志的我,现在已经大三了
    Jenkins+K8s实现持续集成
    Jenkins搭建自动化测试环境
    软件开发式样书 6
    软件开发式样书 5
    软件开发式样书 4
    软件开发式样书 3
    软件开发式样书 2
    软件开发式样书 1
    Git学习笔记
  • 原文地址:https://www.cnblogs.com/pandam/p/10623036.html
Copyright © 2011-2022 走看看