css引入+选择器+css部分样式(文字,文本,背景)

Posted a199706

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css引入+选择器+css部分样式(文字,文本,背景)相关的知识,希望对你有一定的参考价值。

一、

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>

p

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文件
如:

<link href="xxx.css"></link>

二、选择器
  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>

 


  




  

以上是关于css引入+选择器+css部分样式(文字,文本,背景)的主要内容,如果未能解决你的问题,请参考以下文章

CSS-1

4 css文本和文字样式

CSS 扫盲

CSS笔记

CSS 基础语法

CSS 基础语法