黑马程序员----“CSS”

最新推荐文章于 2024-05-27 20:15:11 发布

李臭妞

最新推荐文章于 2024-05-27 20:15:11 发布

阅读量578

点赞数

文章标签：黑马程序员 ASP.NET HTML CSS

本文链接：https://blog.csdn.net/u011015480/article/details/9276535

版权

黑马技术博客专栏收录该内容

15 篇文章 0 订阅

订阅专栏

---------------------- ASP.Net+Android+IO开发S 、 .Net培训、期待与您交流！ ----------------------

（一），样式表

CSS(层叠样式表)是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部引用三种使用方式。

1),元素内联:直接将样式写入元素的style属性中.

2),页面嵌入:在head中加入

  <head>
           <title></title>
                 <style type = "text/css">
                       input{border-color:Blue;color:red}
                 </style>
     </head>

表示页面中所有的input都是采用指定的样式。适合于样式复用，减小页面体积。

3),外部引用：将CSS内容写入CSS后缀文件中，然后在页面中引用，在head中加入：

  <head>
           <title></title>
                 <link type = "text/css" rel ="Stylesheet" href = "文     
                 件名.CSS" />
     </head>

适合多个页面共享CSS

（二），样式选择器

对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合哪些元素，三种：标签选择器、class选择器和id选择器。

1),标签选择器：input{boder-color:blue;color:red},对于指定的标签采用统一的样式。

2),class选择器：以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格。注意：样

式名称开头加“.”

例如：

 <style type="text/css">      
        
        .height{width:100px;height:100px;font-size:50px}
        .waning{color:Gray;background:red}        
       
</style>
    <label class ="waning height">nihaoahfa</label>
    <div class="height">abofabgo</div>

3),标签+class选择器

Class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

例如：

 <style type="text/css">      
         
        label.account{font-style:italic}
        input.account{text-align:right;color:red}
     </style>
   <input class="account" type="text" value="11111111111111"/>
   <label class="account height">asfbagbalg</label>

4),id选择器

为指定id的元素设定样式，id前加#

例如：

 <style type="text/css">
     
          #username
          {
              font-size:xx-large;
          }  
       </style>
       <input id = "username" type="text" value="aaaaa" />

注意：style、class可以同时组合使用

   <input  type = "text"   class = "account" style = "font-size:xx-large;color : blue" value = "你好" />

5),更多选择器

（1），关联选择器

   <style type = "text/css">
                 p strong{background-color:blue}
            </style>

表示：p标签内的strong标签的内容使用的样式。

   <body>
                  <strong>哈哈</strong>
                  <p>
                     <strong>你好</strong>
                   </p>
             </body>

（2），组合选择器

同时为多个标签设定一个样式。

例如：

      <style type = "text/css">
       
               h1,h2,input{background-color:Green}
         </style>
         <h1>你好</h1>
         <h3>哈哈</h3>
         <input  type = "text" value = "你好啊"/>

6),伪选择器

为标签的不同状态设定不同的样式。

A:visited：超链接点击过的样式;

A:active：选中超链接时的样式;

A:link:超链接未被访问时的状态；

A:hover:鼠标移动到超链接时的状态。

例如：

A:visited{text-decoration:none}
A:active{text-decoration:none}
A:link{text-decoration:none}
A:hover{text-decoration:underline}

---------------------- ASP.Net+Android+IO开发S 、 .Net培训、期待与您交流！ ----------------------

李臭妞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
7
评论
黑马程序员----“CSS”

---------------------- ASP.Net+Android+IO开发S 、 .Net培训、期待与您交流！ ---------------------- （一），样式表 CSS(层叠样式表)是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要
复制链接

扫一扫