CSS(层叠样式表)

层叠样式表是同种用来显现HTML规范通用标记语言的一个施用)或XML(标准通用标记语言的一个子集)等文件样式的电脑语言。

CSS近来流行版本为CSS3,是能真的形成网页表现与情分别之均等栽体制设计语言。相对于人情HTML的显示而言,CSS可以对网页中的目的的地点排版举行诸如素级的纯粹控制,辅助几乎有的字体字号样式,拥有对网页对象以及模型样式编辑的力量,并能举办开相互设计,是现阶段冲文本映现太妙的显示设计语言。CSS可以基于不同使用者的精通能力,简化或优化写法,针对各人群,有于强之易读性。

 

标签选取器 

class选择器

.class_name{
color:red;
}

 

id选择器

#id_name{
color:red;
}

 

涉及选用器

  <style>
          .container li a {    #标签关联
              background-color:red;
  }
  </style>

  <div class="container">
          <ul>
              <li>
                 <a>This is A ! </a>    #使某个class下面的 li标签下的 a标签应用此样式
             </li>
         </ul>
 </div>   

=============================================
  <style>
          .container .l .a {        #class关联 找到class=container 再找下面的class=l 继续找到class=a
              background-color:red;
  }
  </style>

  <div class="container">
          <ul>
              <li>
                 <a class="l">
                        This is  span!!
                 </a>    #使某个class下面的 li标签下的 a标签应用此样式
             </li>
         </ul>
 </div>  

结合选取器

.c1 #ll a .cc1,cc2 {
    color:red;   #将.c1 #ll a标签下 class=cc1 和 class=cc2的标签设置此样式
}

.c1 #ll a .cc1,.c1 #ll a .cc2{
    color:red;   #不在一个目录下时,使用全路径
}

性拔取器

<style>
          .con input[type="text"][name='username']{        
              background-color:red;
  }
  </style>  #找到class=con 下的input标签下 type='text'下name='username'的标签 应用此样式

<div class="con">

<input type="text" name="username" />
<input type="file"  />
<input type="password" />
<input type="button"  />
<input type="checkbox" />

</div>

从定义属性(所有的标签还好有所自定义属性)

<style>
          .con input[alex='sb']{        
              background-color:red;
  }
  </style>  #找到class=con 下的input标签下自定义属性alex='sb'的标签 应用此样式

<div class="con">

<input alex='sb' type="text" name="username" />
<input type="file"  />
<input type="password" />
<input type="button"  />
<input type="checkbox" />

</div>

 

运模式

生二种办法好于站点网页上利用样式表:

  1. 外联式Linking(也给外部体制):将网页链接到外部样式表。

  2. 嵌入式Embedding(也被内页样式):在网页上创制嵌入的样式表。

  3. 内联式Inline(也让行内样式):应用内嵌样式到各样网页元素。

  4. 其中,优先级:内联式 > 嵌入式 > 外联式

 

外表样式表

当样式需要给拔取至广大页面的时候,外部体制表将是十全十美之选项。使用外部样式表,你不怕得经转移一个文书来转总体站点的外观。

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--外部样式表-->
    <link rel="stylesheet" href="css/css_cool.css"/>

</head>

<!--应用外部样式表-->
<div class="red">
    rrrrrrrrrrrrrrrrrrrrrr
</div>
<div class="name">
    qqqqqqqqqqqqqqqqqqqqqq
</div>

里面样式表

当单个文件要特地样式时,就好下其中样式表。你可以head 部分通过 <style> 标签定义内部样式表。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <!--内部样式表-->
 8     <style>
 9         所有class=brown应用此样式
10         .brown{
11             color: brown;
12         }
13         }所有class=brown下的a标签应用此样式
14         .brown a{
15 
16         }
17         所有id=new 应用此样式
18         #new{
19             background-color: cyan;
20         }
21         所有的div和span标签应用此样式
22         div,span{
23             font-size: 50px;color: red;
24         }
25         所有a标签下的div标签应用此样式
26         a div{
27             background-color: red;
28         }
29         所有input标签下type='text'的标签应用此样式
30         input[type='text']{
31 
32         }
33     </style>
34 </head>
35 
36 
37 <!--应用内部样式表-->
38 
39     Embedding style!
40 
41 
42 <!--应用ID选择器-->
43 <div id="new">nnnnnnnnnnnnnnnnnnnn</div>
44 
45 123123123123123

 

内联样式

当新鲜之样式需要利用及个别元素时,就足以动用内联样式。
使用内联样式的法是在连锁的签中采用样式属性。样式属性可以分包其他 CSS
属性。以下实例展现出什么转段落的水彩及左外边距。

1 <!--应用内联样式-->
2 <div style="color: blue;">
3     Inline style!!!
4 </div>

 

先来说两独标签: <div>
 <span>

及时片单标签其实什么都无是,如若无向里写内容,那么什么都不相会呈现。

而,<div>标签里设写副内容,那么尽管改为一个块级标签,<span>标签写副内容,就相会成为一个内联标签。

CSS+div

一.精简代码,降低重构难度。

网站采纳DIV+CSS布局要代码非凡精简,相信大多恋人为还不怎么有所闻,css文件可以以网站的随机一个页面举行调用,而若以table表格修改部分页面也是映现挺劳苦。假使一个门户网站的说话,需手动改很多页面,而且看正在那个表格也会晤觉得异常乱为殊浪费时间,可是采用css+div布局就需要修改css文件被的一个代码即可。

二.网页访问速度

用了DIV+CSS布局的网页和Table布局相比,精简了过多页面代码,那么该浏览访问速度自然好提高,也由此提高了网站的用户体验度。

三.SEO优化

利用div-css布局的网站对搜索引擎非常自己,由此该制止了Table嵌套层次过多如望洋兴叹被寻找引擎抓取的题材,而且简、结构化的代码更加有利于优秀重点和可搜索引擎抓取。

四.浏览器兼容性

DIV+CSS对比TABLE布局,更易于现身多浏览器不匹配的问题,首要因是殊的浏览器对web标准默认值不同。国内主流是ie,firefox及chrome用的于少,在兼容性测试点,首先得确保在ie多版本不出现问题,这里涉及到片艺术以及技艺,可以本着具体问题在网站寻找解决办法。

 

RGB(颜色对照表)

http://www.114la.com/other/rgb.htm

 

background

  • background-color   背景颜色

 

  • background-image   背景图片

 

  • background-repeat: no-repeat;

 

  •  background-position

 

 

border

wwwwww

 

123456789

 

123456

 

123456

 

display

  display:none
使该一去不返

  display:block   #内联标签,转变成块级标签

span flag!!! span
flag!!!

  display:inline

div flag!!!

div flag!!!

 

1 <!--内联——>块级-->
2 span flag!!!
3 span flag!!!
4 
5 <!--块级<——内联-->
6 <div style="background-color: darkgreen">div flag!!!</div>
7 <div style="display: inline;background-color: darkgreen">div flag!!!</div>

  

cursor

转移光标的体裁

pointer || help || wait || move || crosshair

 

浮动 float

left

right

 

图片 1图片 2

<style>
        .w-left{
            width: 20%;
            background-color: red;
            height: 100px;
            float: left;
        }
        .w-right{
            width: 80%;
            background-color: green;
            height: 100px;
            float: left;
        }
    </style>
<div>
    <div class="w-left"></div>
    <div class="w-right"></div>
</div>

<div>
    <div style="float:left;width: 20%;height: 150px;background-color: blue;"></div>
    <div style="float: left;width: 80%;height: 150px;background-color: green;"></div>
</div>

浮动float

 

变化的标签会覆盖掉父类的价签样式,需要另外安装属性:

1、在变化的标签后当抬高一个标签

1 <div style="background-color: aqua;">
2     <div style="float: left;">1111</div>
3     <div style="float: left;">2222</div>
4     <div style="clear: both;"></div>
5 </div>

2、或者在父类的竹签及设置一个可观的性能样式

1 <div style="background-color: aqua;height: 150px;">
2     <div style="float: left;">1111</div>
3     <div style="float: left;">2222</div>
4 
5 </div>

 

 

 

上下边距

padding:内边距  标签自己扩展边距

1 <div style="background-color: blue;height: 100px;">
2     <div style="background-color: aqua;height: 30px;padding-top: 10px;"></div>
3 </div>

 

margin:外边距  距离顶部的离

1 <div style="background-color: chartreuse; border:1px solid yellow;height: 100px;">
2     <div style="background-color: red;height: 30px;margin-top: 10px;"></div>
3 </div>

 

每当装边距时起三栽形式:

1、20px 一个价值代表上下左右都是20px之离开

2、20px 30px   第一单价值代表上下是20px  第二单价值代表左右且是30px

3、20px 10px 30px 40px  顺时针分别代表及、下、左、右

 

用标签水平位于中:

1 margin: 0 auto; 标签水平居中

 

 

position    位置

fixed:固定于浏览器窗口的之一地点

1 <div id="content" style="background-color: #ddd;height: 2000px;">
2 
3     <a href="#content" style="position: fixed;right: 20px;bottom: 20px;">返回顶部</a>
4 </div>

 

relative:相对地点

absolute:相对地方  (默认absolute是相对让浏览器的职)两者一般会于合下,absolute一定当relative标签的中

1 <div style="position: relative; background-color: aqua;margin: 0 auto;height: 100px;width: 300px;">
2         <h2>修改数据</h2>
3         <a style="position: absolute;right: 10px;bottom: 10px;">AAAAAAAAAAAAAAAAAA</a>
4 </div>

 

overflow :溢起后发出滚动条

auto:滚动条

 1 <div style="background-color: cornflowerblue;height: 100px;overflow: auto;">
 2     wwwwwwwwwwwww <br/>
 3     wwwwwwwwwwwww <br/>
 4     wwwwwwwwwwwww <br/>
 5     wwwwwwwwwwwww <br/>
 6     wwwwwwwwwwwww <br/>
 7     wwwwwwwwwwwww <br/>
 8     wwwwwwwwwwwww <br/>
 9     wwwwwwwwwwwww <br/>
10     wwwwwwwwwwwww <br/>
11     wwwwwwwwwwwww <br/>
12     wwwwwwwwwwwww <br/>
13     wwwwwwwwwwwww <br/>
14     wwwwwwwwwwwww <br/>
15 
16 </div>

 

hidden:隐藏

 1 <div style="background-color: cornflowerblue;height: 100px;overflow: hidden;">
 2     wwwwwwwwwwwww <br/>
 3     wwwwwwwwwwwww <br/>
 4     wwwwwwwwwwwww <br/>
 5     wwwwwwwwwwwww <br/>
 6     wwwwwwwwwwwww <br/>
 7     wwwwwwwwwwwww <br/>
 8     wwwwwwwwwwwww <br/>
 9     wwwwwwwwwwwww <br/>
10     wwwwwwwwwwwww <br/>
11     wwwwwwwwwwwww <br/>
12     wwwwwwwwwwwww <br/>
13     wwwwwwwwwwwww <br/>
14     wwwwwwwwwwwww <br/>
15 
16 </div>

 

标签外边距为0 ,填充整个浏览器宽度

margin: 0 auto;

1 <style>
2         body{
3             margin: 0 auto;  设置body的外边距为0
4         }
5     </style>

 

透明度

1 opacity: 0.2;(谷歌浏览器生效)
2 filter: alpha(opacity=10);
3 -moz-opacity: 0.1;

 图片 3

 

z-index   数值越充分,层级更加强,数值越聊,越靠底层

1 style="z-index: 1;
2 style="z-index: 2;

 

遮罩层

足运用display:none属性来安装遮罩层和编辑层的起和消退,利用div标签的宽窄、中度和岗位position:fixed属性来装老当浏览器的中间地方

 1 <div >
 2 最底层的HTML
 3     <div style="z-index: 1;opacity: 0.6;position: fixed;left: 0;right: 0;top: 0;bottom: 0; background-color: blueviolet;display: none"></div>
 4     <div style="z-index: 2;position:fixed;left: 50%;top: 50%;margin-left: -100px;margin-top: -75px;display: none;">
 5         <div style="background-color: crimson;width: 200px;height: 150px;">
 6         <input type="text"/>
 7         <input type="text"/>
 8         <input type="text"/>
 9         <input type="text"/>
10         <input type="text"/>
11         <input type="text"/>
12         </div>
13     </div>
14 </div>

 

鼠标放置A标签,使下划线消失:

text-decoration: none

<a style="text-decoration: none;" href="www.baidu.com">This is A !!!</a>

 

故此CSS的伪类方法,使鼠标在标签上改样式

a:hover

 1 CSS样式代码:
 2  
 3        .menu{
 4             padding: 15px;
 5         }
 6         .menu a:hover{
 7             background-color: firebrick;
 8         }
 9 
10 html代码:
11 
12 <div class="menu">
13     <a  href="#">菜单一</a>
14     <a  href="#">菜单一</a>
15     <a  href="#">菜单一</a>
16     <a  href="#">菜单一</a>
17     <a  href="#">菜单一</a>
18 </div>

 

Bootstarp中,图片出现圆角的模式

1 border-radius:50%;

 

相关文章

网站地图xml地图