css(1)

最新推荐文章于 2024-09-19 11:25:25 发布
最新推荐文章于 2024-09-19 11:25:25 发布
阅读量540 收藏
点赞数
分类专栏： css 文章标签： css 

css:cascading style sheets层叠样式表
css版本号：2.0

2.css的作用：
  快速维护页面元素（如文本、图像、链接等）的外观
  （如字体、字号、颜色等）

3.html属性与css样式的使用原则（p59）

  W3C建议尽量使用css样式取代HTML标记属性
   例如：src属性只能用html实现，
   但是宽高属性尽量使用css样式实现

4.css应用方式
  4.1链接到外部的css文件
    扩展名： .css
    <link type="text/css" rel="stylesheet" 
     media="all|screen|print" href="CSS文件地址">
    media:
     all:浏览器支持
         打印：支持  针对所有
    screen：浏览器支持，打印不支持，针对屏幕
    print：浏览器不支持，打印支持，针对打印机

  4.2书写在文档的头部（<head>标签里）

    <style  type="text/css">
      ...
      ....
    </style>
   css样式同时使用外部和内部样式的时候，
  采用书写顺序放在下面的

  4.3书写在标记内部(优先级最高，重复定义以最后一次为准)

    <标记名 style="css样式"/>
    <标记名 style="css样式">...</标记名称>

5、css语法结构

 选择器{
  属性：值；
  属性：值；
   。。。
 }


 二、选择器（哪些对象使用css样式）
  1.通配选择器--*（能够自动应用于所有元素）
  2.元素选择器--标记名称（自动应用于指定的元素）
    也叫类型选择器

   例如（标题为h2的）：
   h2{
       color:red;
       }
   3.类选择器 -- .类名称
     1）在使用css类时需要添加class="类名"属性
     2）css类在声明时需要加点"."，但是在使用时无需“点”
   例如：
    <style type="text/css">
       .a1{
       color:red;
       }
     </style>



     <h1 class="a1">标题1(A)</h1>

      3）多个css类之间以空格分隔

       <h1 class="a1 a2">标题1(A)</h1>
       4)变形的用法
         元素名.类名称（只能用于指定元素）

        例如：
         td.a3{
            color:blue;
          }代表的意思是a3只能用于单元格对象。


          .类名称.类名称：指只能同时应用这2个类

         例如：.a4.a5{
        font-size:80px;
       }表示的意思是只能同时使用a4和a5这两个类

 p.a1.a2：只用于段落，同时用于a1和a2


4.ID选择器--#id(主要是为以后的java脚本用)
  1）只能手动的应用给文档的唯一对象。
  2）使用时添加id="ID"属性
  3)对象的ID除了css可以使用外，还可以被当前
   JavaScript或jQuery使用到。

   JavaScript：
     document.getElementById(String id)
   jQuery:
     $('#id')


<style type="text/css">
       #a1{
       color:yellow;
       font-size:80px
       }
     </style>
...

<h2 id="a1">我是标题2</h2>

 5.群组选择器（实际上是具有相同属性的选择器的简捷方式）

  选择器,选择器,...
   h1,.red{
         color:red;
       }表示元素选择器跟类选择器具有相同的属性

 6.派生选择器（后代选择器）
   选择器 选择器 ...

   说明：前面的选择器至少是后面选择器的父节点


   7.伪类选择器（主要是针对链接）
  :link,正常显示的状态
  :hover，鼠标放上的状态
  :active，鼠标按下的状态
  :visited，访问过的状态

  三、css单位
  1.长度
   px:像素
   %:百分比
   em:字号的倍数
  2.颜色
    1）英文名称，如red，green，blue等
    2）完成的16位进制数字，如#ff0000(2位为单位，分别表示红绿蓝)
    #ff0000红，#00ff00l绿，#0000ff蓝
    3)简写的十六位进制，（#aabbcc的形态可以简写为#abc）如#f00
   4)RGB模式，如rgb(0,0,255)
   5)百分比的RGB模式，如rgb(0%,100%,0%)

3.css选择器优先级

例1：

inline,IDs,classes,tags

内联样式其优先级代码是1,0,0,0

  例2：
 #a2{
 }
id选择器的优先级是0,1,0,0

类选择器的优先级是0,0,1,0

例4
p{
}
元素选择器的优先级是：0，0，0，1

例5
#a1 a2 .a3 .a4 p{
}
0,2,2,1

-----------------
一、布局属性：
width:value;
height:value;


二、边框属性
  上边框的宽度：
  border-top-width：value;


  上边框的线形：
  border-top-style:
  none|solid（实线）|dotted（简化线）;


  上边框的颜色：
  border-top-color

  border-top(补p68[2])
   设置上边框的属性
   语法：border-top:width style color;

   四条边框线都一样：
   border:width style color;


   overflow
   溢出处理
   语法：
overflow:visible（可见）|hidden（隐藏）|scroll（滚动）

 hidden用的最多

三、内边距与外边距
          3.1 外边距(框线与外部的边距)

                                顶部的外边距：
          margin-top:value;
          margin-right:value;
          margin-bottom:value;
          margin-left:value;
          设置外边距：
          margin:value;(是个方向相同)
          margin:value value (上下,左右)
          margin:value value value value(上,左右 ,下)
          margin:value value value value value(上,右,下,左)

  内边距
  padding-top
  padding-right
  padding-left
  padding-bottom
  padding
  padding

 四、盒子模型（BoxModel）
  对象的宽度=左侧外边距+左侧边框+左侧内边距+宽度
      +右侧内边距+右侧边框+右侧外边距

   #container
   #logo
   #navi导航
   #main 主要内容
   #copy 版权





Dreamweaver(html编辑工具)

common.css

p{
  color:green;
  font-size:20px;

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>css作用</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <link type="text/css" rel="stylesheet" 
     media="all" href="common.css">
      <style type="text/css">
       p{
            color:red;
            font-size:20px;
          }
     </style>

    </head>
    <body>
        <p>文本样式</p>
        <p style="color:blue">文本样式</p>
        <p>文本样式</p>
        <p>文本样式</p>
    </body>
</html>

颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>color</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    </head>
    <body>
        <p>文本样式</p>
        <p style="color:red">文本样式</p>
        <p style="color:#ff0000">文本样式</p>
        <p style="color:#f00">文本样式</p>
        <p style="color:rgb(255,0,0)">文本样式</p>
        <p style="color:rgb(100%,0,0)">文本样式</p>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>css选择器优先级</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        *{
        color:red;
        }
        p{
        color:green;
        }
        .p1{
        color:blue;
        }
        #p2{
        color:yellow;
        }
        .a4{/*0,0,1,0*/
        color:green;
        }
        body a5{/*0,0,1,1*/
         color:red;
        }

        </style>
    </head>
    <body>
        <p style="color:black" id="p2" class="p1">文本样式</p>
        <p>文本样式2</p>

        <h1 class="a4 a5">标题1</h1>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>01通配选择器.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style>
       *{
         color:red;
       }
     </style>
  </head>

  <body>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <p>我是段落</p>
    <table width="300" cellpadding="10" cellspacing="0" border="1">
      <tr>
         <td>我是单元格1</td>
         <td>我是单元格2</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>02元素选择器.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style type="text/css">
       h2{
       color:red;
       }
     </style>

    </head>

  <body>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h2>我是标题2</h2>
    <h2>我是标题2</h2>

     <p>我是段落</p>
    <table width="300" cellpadding="10" cellspacing="0" border="1">
      <tr>
         <td>我是单元格1</td>
         <td>我是单元格2</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>03类选择器.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style type="text/css">
       .a1{
       color:red;
       }
       .a2{
         font-size:40px;
       }
       td.a3{
       color:blue;
       }
        .a4.a5{
        font-size:80px;
       }
     </style>

    </head>

  <body>
    <h1 class="a1">标题1(A)</h1>
    <h1 class="a3">我是标题1</h1>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h2 class="a1 a2">我是标题2(AB)</h2>
    <h2 class="a1">我是标题2(A)</h2>

     <p class="a4 a5">我是段落(A)</p>
    <table width="300" cellpadding="10" cellspacing="0" border="1">
      <tr>
         <td  class="a3">我是单元格1</td>
         <td>我是单元格2</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>04ID选择器.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style type="text/css">
       #a1{
       color:yellow;
       font-size:80px
       }
     </style>

    </head>

  <body>
    <h1>标题1</h1>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h2>我是标题2</h2>
    <h2>我是标题2</h2>

     <p id="a1">我是段落</p>
    <table width="300" cellpadding="10" cellspacing="0" border="1">
      <tr>
         <td>我是单元格1</td>
         <td>我是单元格2</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>05群组选择器.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style type="text/css">
       h1,.red{
         color:red;
       }
     </style>

    </head>

  <body>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h2>我是标题2</h2>
    <h2 class="red">我是标题2</h2>
     <p>我是段落</p>
     <p class="red">我是段落</p>
     <p>我是段落</p>
    <table width="300" cellpadding="10" cellspacing="0" border="1">
      <tr>
         <td>我是单元格1</td>
         <td>我是单元格2</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>06后代选择器（派生选择器）.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style type="text/css">
       strong em{
         color:red;
       }
     </style>

    </head>

  <body>
     <p>A1<strong><em>加粗倾斜</em></strong></p>
     <p>A2<strong><u><em>加粗倾斜</em></u></strong></p>
     <p>B<em><strong>加粗倾斜</strong></em></p>
     <p>C<strong>加粗</strong></p>
     <p>D<em>倾斜</strong></p>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>07伪类选择器.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!--text-decoration:划线-->
     <style type="text/css">
       a{
         color:red;
         text-decoration:none;
       }
       a:hover{
       color:black;
       text-decoration:underline;
       }

     </style>

    </head>

  <body>
     <p><a href="#">链接1</a></p>
     <p><a href="#">链接2</a></p>
     <p><a href="#">链接3</a></p>
     <p><a href="#">链接4</a></p>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>宽度高度.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style type="text/css">
       #wrapper{
          width:500px;
          height:300px;
          border-top-width：2px;
          border-top-style:dotted;
          border-top-color:red;
          border-right-width：2px;
          border-right-style:solid;
          border-right-color:red;
          border-left-width：2px;
          border-left-style:solid;
          border-left-color:red;
          border-bottom-width：2px;
          border-bottom-style:none;
          border-bottom-color:red;
       }
     </style>

    </head>

  <body>
         <!--div是个容器-->
     <div id="wrapper">12345</div>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>宽度高度.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style type="text/css">
       body{
         /*
          margin-top:0;
          margin-left:0;
          margin-bottom:0;
         */
          margin:0;
       }
       #wrapper{
          width:500px;
          height:100px;
          /*
          二、边框属性
  上边框的宽度：
  border-top-width：value;


  上边框的线形：
  border-top-style:
  none|solid（实线）|dotted（简化线）;


  上边框的颜色：
  border-top-color

  border-top(补p68[2])
   设置上边框的属性
   语法：border-top:width style color;

   四条边框线都一样：
   border:width style color;
          */

          /* css注释：
          border-top-width：2px;
          border-top-style:solid;
          border-top-color:red;
          */
          /*
          border-top:2px solid red;本行等价于上面3行
          border-left:2px solid red;
          border-right:2px solid red;
          border-bottom:2px solid red;
          */
          border:2px solid red;/*本行等价于上面4行*/
          overflow:visible;

          /*
          overflow
                                  溢出处理
                                语法：
          overflow:visible（可见）|hidden（隐藏）|scroll （滚动）
           hidden用的最多                    
          */


       }
                   /*                             
                      三、内边距与外边距
          3.1 外边距(框线与外部的边距)

                                顶部的外边距：
          margin-top:value;
          margin-right:value;
          margin-bottom:value;
          margin-left:value;
          设置外边距：
          margin:value;(是个方向相同)
          margin:value value (上下,左右)
          margin:value value value value(上,左右 ,下)
          margin:value value value value value(上,右,下,左)
          */
       #container{
          width:500px;
          height:1000px;
          border:2px solid blue;
          margin-top:20px;
          padding:20px;/*内边距*/
       }
     </style>

    </head>

  <body>
         <!--div是个容器-->
     <div id="wrapper">
       <p>12345</p>
       <p>12345</p>
        <!--
       <p>12345</p>
       <p>12345</p>
       <p>12345</p>
       <p>12345</p>
       <p>12345</p>
       <p>12345</p>
       <p>12345</p>
       <p>12345</p>
       -->
     </div>
     <div id="container">
       <p>ABCDE</p>
     </div>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>盒子模型（BoxModel）</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style type="text/css">
       body{
          margin:0;
       }
       #wrapper{
          width:500px;
          height:100px;

          border:2px solid red;
          overflow:visible;
          margin:0 auto;/*上下外边距0，左右居中*/
       }
         #container{
          width:500px;
          height:1000px;
          border:2px solid blue;
          /*margin-top:20px;*/
          margin:0 auto;
          padding:20px;/*内边距*/
       }
     </style>

    </head>

  <body>
         <!--div是个容器-->
     <div id="wrapper">
       <p>12345</p>
       <p>12345</p>
     </div>
     <div id="container">
       <p>ABCDE</p>
     </div>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>盒子模型（BoxModel）</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style type="text/css">
        body{
         margin:0;
        }
        img{
          border:none;
        }

        #container{
          width:960px;
          margin:0 auto;
          border:1px solid #f00;
        }
        #logo{
            height:62px;
        }
     </style>

   </head>

   <body>
       <div id="container">
       <!-- Logo start -->
         <div id="logo"><a href="#"><img src="images/pic.bmp" alt=""></img></a></div>
       <!-- Logo End -->

       <!-- Navi start -->
         <div id="navi"></div>
       <!-- Navi End -->

       <!-- Main start -->
         <div id="main"></div>
       <!-- Main End -->

       <!-- copy start -->
         <div id="copy"></div>
       <!-- copy End -->
       </div>
   </body>
</html>
wahxsm
关注
专栏目录
CSS常用特效
Lee的博客
07-17 1万+
本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其
css1vh等于多少px,css单位px、rem、em、vw、vh
weixin_33732812的博客
08-04 4415
css单位有两种分为相对单位和绝对单位绝对单位有:px相对单位有：rem、em、vw、vh下面我们一起来了解这几个单位吧。1、rem：相对根元素字体大小来计算1rem默认为16px当根元素有font-size时1rem的单位则是font-size的大小下面我们看这个例子html{font-size: 20px;}.rem {width: 20rem;height: 20rem;background...
CSS表格
m0_57774967的博客
04-24 5637
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS——less
qq_48613863的博客
04-09 8705
1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。 在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。 Less是一个CSS预处理器, Less文件后缀是.less； 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力； 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CS
CSS详解
亦翼的博客
07-11 2572
文章目录概念CSS与HTML的结合方式方式一：内联/行内样式方式二：内部样式表方式三：外部样式表CSS的使用CSS选择器元素（标签）选择器类选择器 & id选择器选择器组派生选择器CSS伪类CSS基本属性文本属性背景属性列表属性边框属性轮廓属性盒子模型CSS定位默认定位浮动定位相对定位绝对定位固定定位Z-indexCSS3圆角盒子阴影渐变线性渐变径向渐变背景背景位置背景裁切背景大小过渡 & 动画过渡动画 概念 CSS 即层叠样式表 Cascading Style Sheets 通过CSS可
css小手样式
麋鹿的鹿
11-27 7737
cursor: pointer;
css定义变量
lishuaihao的博客
04-21 3793
使用方式：css定义变量的方式是** 通过给一个属性加上-- **然后他就成为了一个css属性 --mainbgc: rgb(84, 138, 160); 好处：这样的好处是可以通过一个变量控制全局的样式，可以用于修改主题颜色 举例：比如定义一个用于背景色的变量： 然后去使用它： .box1 { background-color: var(--mainbgc); } 具体的使用场景的例子如下： <!DOCTYPE html> <html lang="en"&.
css inset属性
热门推荐
fendo
06-13 2万+
在uniapp下使用了swiper来实现滑动,默认属性下,一个item占满整个屏幕我这想要的效果是所有的item,横向排列,最终实现的效果如下所示实现这种效果很简单就是使用了css中的inset属性inset属性说明如下： inset CSS属性，它具有与简写边距相同的多值语法。虽然是CSS逻辑属性规范的一部分，但它定义物理偏移量，而不考虑元素的书写模式、方向和文本方向。属性值可以为长度，百分比，关键字（auto），全局的值（inherit; initial; revert; revert-laye
浅学CSS
m0_63640914的博客
08-06 1960
自己浅学css
CSS选择器
chnejgeo的博客
06-17 2428
在 CSS 中，选择器是选取需设置样式的元素的模式。 下面我们介绍几种常用选择器: 元素选择器:通过选择html标签设置css样式 如果设置 html的样式，选择器通常将是某个 html元素，比如 p、h1、em、a，甚至可以是 html 本身： 写法：html{font-size:35px;} 2.类选择器：通过获取class类设置css样式 写法：.name{color:red;} “.”表示类，“name”表示类名，以.开头加类名表示类选择器 3.ID选择器：通过获取ID来设置css样式
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
css1css1css样式css1css1css1css1css1css1css33333
08-08
css1css样式css1css1css1css1css1css1css33333
css-csscss-css
09-19
css css css css css css
css入门之CSS1、CSS2、CSS3、CSS4发展历程
蛐蛐的博客
07-11 2103
CSS 最初于 1996 年发布，由用于添加字体属性的属性组成例如字体和文本的强调颜色、背景和其他元素。CSS2 于 1998 年发布，为其他媒体类型添加了样式，以便可以用于页面布局设计。CSS3 于 1999 年发布，其中添加了演示样式属性，允许从文档构建演示文稿。CSS3 将其规范划分为许多单独的模块，这使得 CSS3 更易于处理。借助 CSS3，设计人员现在可以使用自定义字体，例如 Google Fonts 和 Typecast 中可用的字体。在 CSS 和 CSS2，设计人员只能使用“网络安全字体”
在CSS中换行word-break: break-word和 word-break: break-all区别
最新发布
weixin_46528266的博客
09-19 247
在CSS中换行word-break: break-word和 word-break: break-all区别
HTML、CSS实现树状图
p_s_p的博客
09-09 975
【代码】HTML、CSS实现树状图。
项目中使用简单的立体3D柱状图，不用引入外部组件纯css也能实现
彭于晏的博客
09-13 415
在一些项目需求中，可能会遇到下面这种场景，3d柱状图来展示百分比，但是又不想引入外部组件，下面就用纯css给大家封装了一个组件。在需要使用的地方直接引入使用就好了，只传百分比，宽高有需要再传。
【H2O2|全栈】关于CSS（6）CSS基础（五）
过期的H2O2的博客
09-19 1056
本系列博客将分享层叠样式表（CSS）有关的知识点。本期博客主要分享的是网页项目规范，outline属性，部分伪类/伪元素的扩充，以及圆角半径的相关知识点。听着有些不着边际，但毕竟是补充嘛。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。
CSS的offset属性
读心悦
09-15 581
如果你确实需要在CSS中根据元素的偏移量来应用样式，并且这个偏移量是动态的（比如，基于JavaScript计算得出的），你可能需要使用JavaScript来动态地修改元素的类名或内联样式，以反映这些变化。: 虽然这些属性不是直接用于定位元素的，但它们可以影响元素与其他元素之间的空间，从而间接影响布局和元素的“偏移”效果。属性本身不是直接用于“偏移”的，但它可以用来移动元素，包括旋转、缩放、倾斜等。可以实现元素的水平或垂直移动，而不需要改变文档流中的实际位置。，这些属性用于获取元素的位置和尺寸信息。
"学习网页设计：CSS1至CSS3版本简介与应用
CSS1于1996年发布，并于1999年进行了修订。CSS2于1999年发布，添加了对媒介和可下载字体的支持。而CSS3计划将CSS划分为更小的模块，引入了众多新的功能和特性，例如圆角、阴影、动画等。 使用CSS的优势在于可以将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值