css引入+选择器+css部分样式（文字，文本，背景）

时间：2019-06-18 18:23:40 收藏：0 阅读：158

一、

css引入方式（三种）
1、内联：
在标签中设置style属性
<标签名 style=“样式1：样式值2；样式1：样式值2”>
<标签名>

如：<a style ="color：red； font-size=20px；"

</a>
2、内嵌：
在head标签中加入style标签
<style>
选择器1{
样式1：样式值1；
样式1：样式值1；
样式1：样式值1；

}
选择器2{

样式1：样式值1；
样式1：样式值1；
样式1：样式值1；

}

如：<style>

color:blue;

font-weight:bold;

}

</style>
3、外部引入
   新建.css文件，在css文件中写样式
    选择器1{
样式1：样式值1；
样式1：样式值1；
样式1：样式值1；

}
   选择器2{

样式1：样式值1；
样式1：样式值1；
样式1：样式值1；

}
在html文件的head标签中用link标签引入css文件
如：

二、选择器
1、id选择器
在标签中加入id属性<标签名 id=“id值”></a>
#id值 每一篇都只有一个值

   2、clss选择器
   在标签中加入class属性<标签名 class=“class值”>
   .class值   注意：class代表的是一类

   3、元素（标签）选择器
   在内嵌或者外部css文件中书写的格式
   元素名 a{

   }
   标识符（各种起名）规范：只能是数字字母、下划线、$其中不能以数字开头，并且不能是关键字
   </>
   选择器优先级：
        id选择器<class选择器>元素选择器
   引入方式优先级：
       内联>内嵌>外部引入就近原则
   选择器的关系：
       并列关系：
       选择器1，选择器2{

       }如：#p1,#s1,li,ul{
       color:red;
   }
      父子关系   嵌套父亲不设置值，给儿子设置
   如：

#u1 #l4{
color:gray;
}

兄弟关系 +兄弟给兄弟即弟弟加样式
如：

   #l5+li{
       color: blueviolet;
   }

三、文字

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基础样式</title>
<style>

    /*背景*/
    body{
        background-color: bisque; 背景颜色
        background-image: url(../../img/2.1.jpg); 背景图片
        background-repeat: no-repeat;   背景不平铺
        background-attachment: fixed;  背景固定
    
    }
    #d1{
        /*字体，大都以font开头，除去color*/
        font-family: 微软雅黑；Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;  文字字体
            font-size:30px;  大小
        font-weight: lighter;  细
        font-style: italic;  斜体
        color: red;  颜色
        }
    #p1{
        /*文本*/
        text-decoration: underline; 下划线
        text-transform: lowercase;  英文小写字母
        text-indent: 2em;   首行缩进2字符
        text-align: center;  文本居中对齐
        line-height: 50px;  行高50px
        
    }
    #d2{
        /*
        边框

       border-width: 5px;
        
        border: 3px red dashed;*/
        border-top:60px solid #FDFCFC;  
        border-left: 60px solid #FDFCFC;
        
        border-right: 60px solid #FDFCFC;
        border-bottom: 60px solid red;
        width: 0px;
        height: 0px;
        /*只要是块状元素都可以设定*/
    }
    #q1{
        width: 200px; 
        height: 200px;
        background-color: aqua;
        
    }
    #q2{
        background-image: url(../../img/2.1.jpg);  背景浮动
        background-position:-283px -182px;
    }
    </style>
</head>

<body>
<div id="d1">
    这块区域
</div>


    <input type="text" name="mc" id="q2">



<p id="p1">这是一个段落标签hello</p>
<div id="d2">
<div class="d1">
    
</div>
<div id="q1">
    
</div>
<div class="d1">
    
</div>
<div class="d1">
    
</div>
    
</div>

</body>
</html>