css的二种样式,CSS两种格局的优先级

By admin in 4858美高梅 on 2019年4月25日

1、行间样式

1、行间样式

  • 内联式:内联式css样式,间接写在现存的HTML标签中
    如上边代码:

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。

顾名思义就是一直写在div对内部的体裁 

顾名思义正是从来写在div对内部的体裁 

/*申明区域***/ **  
此为注释语法

4858美高梅 1

4858美高梅 2

<p style="color:red">这里文字是红色。</p>

一、样式表

 

 

再者css样式代码要写在style=””双引号中,纵然有多条css样式代
码设置能够写在1块,中间用分号隔离。如下代码:

(一)样式表的分类

2、内部样式

二、内部样式

<p style="color:red;font-size:12px">这里文字是红色。</p>

一.内联样式表

把体制写在一对<style></style>标签对中
这些标签对是坐落html页面里面包车型地铁

把体制写在一对<style></style>标签对中
那个标签对是献身html页面里面包车型客车


  和HTML联合显示,调节标准,不过可重用性差,冗余较多。

4858美高梅 3

4858美高梅 4

  • 嵌入式
    嵌入式css样式,就是足以把css样式代码写在<style
    type=”text/css”></style>标签之间。如下边代码落成把多少个<span>标签中的文字设置为革命:

  例:<p
style=”font-size:1四px;”>内联样式表</p>

 

 

贰.内嵌样式表

 

 

<style type="text/css">
span{
color:red;
}
</style>

  作为三个单独区域内嵌在网页里,必须写在head标签里面。

 

 

嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间

  <style
type=”text/css”>

叁、外联样式

3、外联样式

例如

  p   //格式对p标签起作用

把体制写在三个单独的文书之中 用到的时候用地点把它推荐来就足以了

css的二种样式,CSS两种格局的优先级。把体制写在1个独自的文本之中 用到的时候用地方把它推荐来就能够了

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        span{
            color: #e7123b;
            font-size: 30px;
            font-weight: bolder;
        }
    </style>
</head>

  {

 

 


  样式;

4858美高梅 5

4858美高梅 6

  • 外部式css样式
    外部式css样式(也可称之为外联式)正是把css代码写贰个单身的外部文件中,那一个css样式文件以“.css”为增添名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下边代码:

  }

 

 

  </style>

4858美高梅 7

4858美高梅 8

<link href="base.css" rel="stylesheet" type="text/css" />

3.外表样式表

 

 

注意:

  新建多少个CSS文件,用来放置样式表。假使要在HTML文件中调用样式表,供给在HTML文件中式点心右键→CSS样式表→附加样式表。一般用link连接方式。

4858美高梅 9

4858美高梅 10

一、css样式文件名称以有意义的英文字母命名,如 main.css。

  有个别标签有暗中认可的边距,一般写样式表代码的时候都会先去除(也得以安装任何的样式),如下:

 

 

二、rel=”stylesheet” type=”text/css” 是一定写法不可修改。

<style type=
“text/css”>

3、<link>标签地方一般写在<head>标签之内。

*   
//格式对富有标签起效果


{

PS:内联式 > 嵌入式 > 外部式

正是近水楼台原则(离被安装成分越近优先等第越高)。

     margin:0px;

     padding:0px;

}

</style>

选择器

1、标签采取器。用竹具名做采取器。

4858美高梅,     <style type= “text/css”>

     p    //格式对p标签起功用

     {

          样式;

     }

     </style>

 

2、class选择器。都是“.”开头。

  <head>

  <style type=”text/css”>

  .main     /*概念样式*/

  {

          height:42px;

          width:100%;

          text-align:center;

  }

  </style>

  </head>

  <body>

  <div class=”main”>      
<!–调用class样式–>

  </div>

  </body>

 

3、id选择器。以“#”开头

  <div id=”样式名”>

  <head>

  <style type=”text/css”>

  #main     /*概念样式*/

  {

          height:42px;

          width:100%;

          text-align:center;

  }

  </style>

  </head>

  <body>

  <div id=”main”>      
<!–调用id样式–>

  </div>

  </body>

 

肆、复合采纳器。

    1)用“,”隔断,表示并列。

  <style type=”text/css”>

  p,span  
 /*标签p、span两者同样的体制*/

  {

          样式;

  }

  </style>

 

    2)用空格隔开,表示后代。

  <style type=”text/css”>

  .main p  
 /*找到使用样式“main”的价签,在该标签里的P标签使用该样式*/

  {

    样式;

  }

  </style>

 

    3)、筛选“.”。

  <style type=”text/css”>

  p.sp  
 /*在标签p中的class=”sp”的价签,推行以下样式*/

  {

          样式;

  }

  </style>

体制属性

背景与前景

     
/*背景象,样式表优先级高*/

  background-image:url(路径);   
/*安装背景图片(暗许)*/

  background-attachment:fixed;   
/*背景是原则性的,不随字体滚动*/

  background-attachment:scroll;   
/*背景随字体滚动*/

  background-repeat:no-repeat;   
/*no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺*/

  background-position:center;   
/*背景图居中,设置背景图地点时,repeat必须为“no-repreat”*/

  background-position:right top;   
/*背景图放到右上角(方位可以本人退换)*/

  background-position:left 100px top
200px;    /*离右侧拾0像素,离上边200像素(能够设为负值)*/

 

  字体

  font-family:”新宋体”;   
/*字体。常用微软雅黑、金鼎文。*/

  font-size:12px;   
/*字体大小。常用像素1二px、14px、18px。仍是能够用“em”,“二.5em”即:暗中认可字体的二.伍倍。仍是能够用百分数*/

  font-weight:bold;   
/*bold是加粗,normal是正常*/

  font-style:italic;   
/*倾斜,normal是不倾斜*/

  color:#03C;    /*颜色*/

  text-decoration:underline;   
/*下划线,overline是上涂鸦,line-through是剔除线,none是去掉下划线*/

  text-align:center;   
/*(水平对齐)居中对齐,left是左对齐,right是右对齐*/

  vertical-align:middle;   
/*(垂直对齐)居中对齐,top是顶部对齐,bottom是底层对齐。一般安装行高后使用。*/

  text-indent:28px;   
/*首行缩进量*/

  line-height:24px;   
/*行高。一般为1.5~二倍字体大小。*/

    display:none;   
/*none,不显得;inline-block,显示为块,不自行换行,宽高可设;block,展现为块,自动换行;inline,效果同span标签,不活动换行,宽高不可设。*/

    visibility:hidden;   
/*可视性。hidden,隐藏不过占空间;visible,展现。*/

分界和边框

     
border(表格边框、样式等)、margin(表外间距)、padding(内容与单元格间距)

  border:5px solid blue;   
/*4边框:五像素宽、实线、栗褐(也就是以下三行)*/

  border-width:5px;

  border-style:solid;

  border-color:blue;

  border-top:5px solid blue;   
/*上面框:5像素宽、实线、石黄(分写同上)*/

  border-bottom:5px solid blue;  
/*上面框:5像素宽、实线、原野绿(分写同上)*/

  border-left:5px solid blue;   
/*左边框:五像素宽、实线、玉石绿(分写同上)*/

      border-right:5px solid blue;   
/*右侧框:5像素宽、实线、樱草黄(分写同上)*/

      margin:10px;    
/*4边外边框宽度为十像素。auto,居中。*/

  margin-top:10px;   
/*上面外边框宽度为10像素;别的三边边框类似*/

      margin:20px 0px 20px 0px;   
/*上-右-下-左,肆边外边框顺时针顺序*/

      padding:10px;   
/*剧情与边框的四边间距为拾像素*/

  padding-top:10px;   
/*内容与边框的上距离为十像素;其余三边间距类似*/

      padding:20px 0px 20px 0px;  
/*上-右-下-左,内容与边框的四边间距顺时针顺序*/

 

列表与方块

  width、height、(top、bottom、left、right)唯有在相对坐标情形下才有用

  list-style:none;  
 /*注销序号*/

  list-style:circle;  
 /*序号造成圆圈,样式约等于冬天*/

  list-style-image:url(图片地址);  
 /*图形做序号*/

  list-style-position:outside;  
 /*序号在剧情外*/

  list-style-position:inside;  
 /*序号跟内容在一块儿*/

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有