CSS二种方法的优先级,css的两种体制

1、行间样式

1、行间样式

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

CSS(Cascading Style Sheet,叠层样式表),成效是鼓吹HTML网页。

顾名思义正是一贯写在div对内部的样式 

顾名思义便是直接写在div对里面的样式 

/*疏解区域***/ *CSS二种方法的优先级,css的两种体制。*  
此为注释语法

澳门葡京 1

澳门葡京 2

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

一、样式表

 

 

并且css样式代码要写在style=””双引号中,要是有多条css样式代
码设置能够写在共同,中间用分号隔断。如下代码:

(一)样式表的归类

二、内部样式

二、内部样式

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

一.内联样式表

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

把体制写在1对<style></style>标签对中
这一个标签对是坐落html页面里面包车型大巴


  和HTML联合突显,调整标准,可是可重用性差,冗余较多。

澳门葡京 3

澳门葡京 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、外联样式

3、外联样式

例如

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

把体制写在三个单身的公文之中 用到的时候用地点把它推荐来就能够了

把体制写在一个单身的公文之中 用到的时候用地方把它推荐来就能够了

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

  {

 

 


  样式;

澳门葡京 5

澳门葡京 6

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

  }

 

 

  </style>

澳门葡京 7

澳门葡京 8

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

3.外部样式表

 

 

注意:

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

澳门葡京 9

澳门葡京 10

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

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

 

 

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

<style type=
“text/css”>

三、<link>标签地点一般写在<head>标签之内。

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


{

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

固然内外原则(离棉被服装置成分越近优先等级越高)。

     margin:0px;

     padding:0px;

}

</style>

选择器

一、标签选取器。用竹签名做选取器。

     <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、1四px、1八px。仍可以用“em”,“二.5em”即:暗许字体的二.5倍。还足以用百分数*/

  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;   
/*四边框:5像素宽、实线、清水蓝(也就是以下叁行)*/

  border-width:5px;

  border-style:solid;

  border-color:blue;

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

  border-bottom:5px solid blue;  
/*上边框:伍像素宽、实线、橄榄黄(分写同上)*/

  border-left:5px solid blue;   
/*左侧框:五像素宽、实线、青色(分写同上)*/

      border-right:5px solid blue;   
/*动手框:伍像素宽、实线、纯白(分写同上)*/

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

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

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

      padding:10px;   
/*内容与边框的4边间距为十像素*/

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

      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;  
 /*序号跟内容在一齐*/

相关文章

发表评论

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

*
*
Website