CSS（3）

最新推荐文章于 2024-09-03 09:11:14 发布
最新推荐文章于 2024-09-03 09:11:14 发布
阅读量380 收藏
点赞数
分类专栏： css 文章标签： css 
一、标准的清理浮动的方法
.clear:after{
   display:block;
   height:0;
   content:".";
   visibility:hidden;
   clear:both;
}
.clear{
   zoom:1;
}

二、文本属性

color
描述:设置文本颜色
语法:color:value;
font-size
描述:设置字号
语法:font-size:value;
说明:
标题:16px~24px
正文:12px~16px

font-family
描述:设置字体
语法:font-family:value,value,...;

font-style
描述:文本倾斜
语法:font-style:italic|normal;
font-weight
描述:文本加粗
语法:font-weight:bold|normal;

text-align
描述:设置文本水平对齐方式
语法:text-align:left|center|right;

text-decoration
描述:设置修饰线
语法:text-decoration:none|underline|line-through|overline;

text-indent
描述:首行缩进
语法:text-indent:value;

line-height
描述:设置行高
语法:line-height:value;
说明:行高一般设置为1.5em~2em

cursor
描述:设置鼠标指针类型
语法:cursor:pointer(手形)|help(帮助)|text(文本)|crosshair(十字光标);

三、显示方式

display

描述:设置对象的显示方式

语法:display:none|block|inline;

哪些对象为块级对象?

A.默认情况下,div,p,h1~h6,ul,li,ol等;
B.内联对象使用display:block;属性后;
C.对象使用float属性后;

四、表格属性

vertical-align
描述:设置垂直对齐方式
语法:vertical-align:top|middle|bottom;

border-spacing
描述:单元格的外边距
语法:border-spacing:value;

border-collapse
描述:设置单元格框线是否合并
语法:border-collapse:separate(分隔)|collapse(合并);



<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>页面布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
        body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li{
            margin:0;
            padding:0;
        }
        body{
           font-size:14px;
           font-family:宋体;
        }
        ul,ol{
            list-style:none;
        }
        img{
            border:none;
        }
        /*标准的清理浮动的方法start*/
        .clear:after{
            display:block;
            height:0;
            content:".";
            visibility:hidden;
            clear:both;
        }
        .clear{
            zoom:1;
        }
        /*标准的清理浮动的方法end*/
        #container{
            width:960px;
            margin:0 auto;

        }
        #logo{
            height:84px;
        }
        #navi{
            height:32px;
            background:#FF7E00;
        }
        #navi li{
           float:left;
           line-height:32px;
        }
        #navi a{
            color:#fff;
            display:block;
            width:100px;
            height:32px;
            text-align:center;
            text-decoration:none;
            margin-right:2px;
            background:url(images/navi_bg.png);
        }
        #main{          

        }
        #left,#center,#right{
            float:left;
            width:300px;            
        }
        #left{


        }
        #center{
            margin:0 30px;      
            background:#0f0;
        }
        #right{

            background:#00f;
        }
        .list li{
           padding-left:12px;
           line-height:1.7em;
           background:url(images/dot.jpg) no-repeat left center;
        }
        .list a{
           color:#000;
           text-decoration:none;
        }
        .list a:hover{
           color:#f00;
           text-decoration:underline;
        }
        .subject{
           font-size:18px;
           font-family:微软雅黑;
        }
    </style>
  </head>  
  <body> 
    <div id="container">
        <!--Logo begin-->
        <div id="logo"><a href="#"><img src="images/logo.jpg" alt=""/></a></div>
        <!--Logo end-->

        <!--Navi begin-->
        <div id="navi">
           <ul class="clear">
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">社会</a></li>
           </ul>
        </div>
        <!--Navi end-->

        <!--Main begin-->
        <div id="main" class="clear">
             <div id="left">
                 <h2 class="subject">国内要闻</h2>
                 <ul class="list">
                    <li><a href="#">国内新闻标题1</a></li>
                    <li><a href="#">国内新闻标题1</a></li>
                    <li><a href="#">国内新闻标题1</a></li>
                    <li><a href="#">国内新闻标题1</a></li>
                    <li><a href="#">国内新闻标题1</a></li>
                    <li><a href="#">国内新闻标题1</a></li>
                    <li><a href="#">国内新闻标题1</a></li>
                 </ul>
             </div>
             <div id="center">B</div>
             <div id="right">C</div>             
        </div>
        <!--Main end-->
    </div>   
  </body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>文本属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
       p{
          font-size:20px;
          font-family:隶书;
          font-style:italic;/*斜体*/
          font-weight:bold;/*粗体*/
          text-align:left;
          text-indent:2em;/*首行文本的缩进*/
          line-height:1.5em;/*行高*/
       }
    </style>
  </head>  
  <body> 
    <p>文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p>
        <p>文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p>
            <p>文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p>
    <p style="text-decoration:underline;">我是通过CSS设置的下划线</p>
    <p style="text-decoration:line-through;">我是通过CSS设置的删除线</p>
    <p style="text-decoration:overline;">我是通过CSS设置的上划线</p>
    <p style="text-decoration:underline overline line-through">我什么线都有</p>
  </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>鼠标指针</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

  </head>  
  <body> 
    <p style="cursor:pointer;">我是手形的鼠标</p>
    <p style="cursor:help;">我是帮助的鼠标</p>
    <p style="cursor:text;">我是文本的鼠标</p>
    <p style="cursor:crosshair;">我是十字光标的鼠标</p>
    <p style="cursor:wait;">我是等待的鼠标</p>
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>页面布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <style type="text/css">
   .a1{
     width:500px;
     border:2px solid #f00;
     /*border-top:2px solid #f00;
     border-left:2px solid #f00;*/

     border-spacing:0px;/*单元格的外边距*/
     border-collapse:collapse;/*表示边框合并在一起（2条线变为1条线）*/
   }

   .a1 td{
     padding:10px;/*内边距*/
     /*border-right:2px solid #f00;
     border-bottom:2px solid #f00;*/
     border:2px solid #f00;

   }
   </style>
  </head>  
  <body> 
    <table class="a1">
        <tr>    
            <td>1111</td>
            <td>1111</td>
        </tr>
        <tr>    
            <td>1111</td>
            <td>1111</td>
        </tr>       
    </table>
  </body>
</html>




一、标准的清理浮动的方法
.clear:after{
   display:block;
   height:0;
   content:".";
   visibility:hidden;
   clear:both;
}
.clear{
   zoom:1;
}

二、文本属性

color
描述:设置文本颜色
语法:color:value;
font-size
描述:设置字号
语法:font-size:value;
说明:
标题:16px~24px
正文:12px~16px

font-family
描述:设置字体
语法:font-family:value,value,...;

font-style
描述:文本倾斜
语法:font-style:italic|normal;
font-weight
描述:文本加粗
语法:font-weight:bold|normal;

text-align
描述:设置文本水平对齐方式
语法:text-align:left|center|right;

text-decoration
描述:设置修饰线
语法:text-decoration:none|underline|line-through|overline;

text-indent
描述:首行缩进
语法:text-indent:value;

line-height
描述:设置行高
语法:line-height:value;
说明:行高一般设置为1.5em~2em

cursor
描述:设置鼠标指针类型
语法:cursor:pointer(手形)|help(帮助)|text(文本)|crosshair(十字光标);

三、显示方式

display

描述:设置对象的显示方式

语法:display:none|block|inline;

哪些对象为块级对象?

A.默认情况下,div,p,h1~h6,ul,li,ol等;
B.内联对象使用display:block;属性后;
C.对象使用float属性后;

四、表格属性

vertical-align
描述:设置垂直对齐方式
语法:vertical-align:top|middle|bottom;

border-spacing
描述:单元格的外边距
语法:border-spacing:value;

border-collapse
描述:设置单元格框线是否合并
语法:border-collapse:separate(分隔)|collapse(合并);

五、定位属性

position
描述:设置定位类型
语法:position:static|fixed(固定)|absolute(绝对)|relative(相对);

fixed,脱离正常文档流,其位置在页面是固定的,并且可以通过top、right、bottom、left进行控制。

absolute,脱离正常文档流,其位置可以通过top、right、bottom、left进行控制。

relative,没有脱离文档流,在通过top、right、bottom、left进行位置控制时，其实只是在原始出现位置上发生偏移。

z-index
描述:设置Z轴叠放顺序
语法:z-index:value;


六、透明度(补P121)

Chrome、 Firefox等

opacity:value(0~1);

IE

filter:alpha(opacity=value[0~100]);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>定位属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <style type="text/css">
    #topNav{
        /*fixed总是以body为定位时的对象，
        总是根据浏览器的窗口来进行元素的定位，
        通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。*/
       position:fixed;
       top:0;
       left:0;
       right:50px ;
       height:50px;
       background:red;
    }
    body{
        padding-top:50px;
    }
   </style>
  </head>  
  <body> 
    <div id="topNav">111</div>
    <p>heheh</p>
    <p>科技</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</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-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>定位属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <style type="text/css">
    #mask{
       position:absolute;
       width:400px;
       height:250px;
       background:#000;
       top:0px;
       left:0px;
       opacity:.1;/*透明度*/
       filter:alpha(opacity=30);
    }
   </style>
  </head>  
  <body> 
    <div id="mask"></div>
    <p>hehe </p>
    <p>科技</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</p>
    <p>文本样式</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-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>定位属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <style type="text/css">
     #parent{
        border:5px solid #f00;
     }
     #son{
        position:relative;
        top:15px;
        left:20px;
        width:150px;
        height:100px;
        border:5px solid #0f0;
     }
   </style>
  </head>  
  <body> 
       <div id="parent">
            <div id="son"></div>
       </div> 
  </body>
</html>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhml">
  <head>
    <title>定位属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <style type="text/css">
     #d1{
        position:absolute;
        width:250px;
        height:250px;
        background:#f00;
        z-index:56;/*设置Z轴叠放顺序*/
     }
     #d2{
        position:absolute;
        width:300px;
        height:300px;
        background:#000;
        z-index:55;
     }
   </style>
  </head>  
  <body> 
       <div id="d1"></div>
       <div id="d2"></div> 
  </body>
</html>
wahxsm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3渐变属性
ssjjrr的博客
10-01 2597
css3渐变属性
CSS3实现动画效果
AXDRXS的博客
12-17 1万+
CSS3实现动画效果
CSS3添加动态圆点
热门推荐
IT侠客行的博客
12-16 1万+
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>CSS3添加动态圆点</title> <style> @-webkit-...
Css(三)
nanci9的博客
12-20 164
Css(三) 1.盒子模型 1.1盒子模型组成 边框border 内容content 内边距padding 外边距margin 1.2边框属性 p{ border:5px solid red; } 只设置其上边框 p{ border-top: 5px solid red; } 边框会影响盒子大小 1.3内边距 边框与内容之间的距离 div { padding: 5px 10px 15px 20px; } 值的个数 描述 padding: 5px; 代表上下左右都是5px
CSS篇一——（3）
Regina_Cai的博客
09-27 750
id选择器的口诀:样式#定义,结构id调用，只能调用一次，别人切勿使用。基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签不能差异化选择较多}类选择器可以选出1个或者多个标签可以根据需求选择非常多}id选择器一次只能选择1个标签ID属性只能在每个HTML文档中出现一次一般和js搭配}通配符选择器选择所有的标签选择的太多，有部分不需要特殊情况使用}每个基础选择器都有使用场景，都需要掌握；如果是修改样式，类选择器是使用最多的。
css3官方帮助文档中文版
07-18
css3官方帮助文档中文版
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
CSS3实现八方向云台遥控器样式
04-22
在本文中，我们将深入探讨如何使用CSS3来实现一个八方向云台遥控器的样式。云台遥控器是用于控制摄像头或类似设备在八个不同方向上移动的装置，这种功能通常应用于无人机、监控系统等领域。在网页开发中，通过CSS3...
html5+css3+JS代码
05-22
CSS3引入了多个新模块，如选择器（如:nth-child()、:not()等），多列布局，媒体查询（实现响应式设计），动画和过渡效果，以及阴影和渐变等视觉效果。CSS3的模块化设计允许开发者根据需求选择性地使用新特性，提高了...
CSS 中的element()函数
读心悦
08-31 727
在 CSS 中，element()函数是一个实验性功能，它允许你将一个 HTML 元素的渲染结果作为另一个元素的背景图像或类似图像属性的值。这个功能非常强大，因为它允许你动态地引用页面上的其他元素，并将它们的渲染结果用作图像。然而，需要注意的是，element()函数目前主要被 Chrome 浏览器支持（通过其-webkit-前缀），并且其规范状态仍然处于草案阶段，因此其未来的可用性和实现细节可能会有所变化。
css的position定位的属性
qq_43235503的博客
08-30 534
css的position定位的属性
CSS解析:定位和层叠上下文
晓风残月淡的博客
08-31 1902
许多开发人员对定位的理解很粗略，如果不完全了解定位，就很容易给自己挖坑。有时候可能会把错误的元素放在其他元素前面，要解决这个问题却没有那么简单。一般的布局方法是用各种操作来控制文档流的行为。定位则不同：它将元素彻底从文档流中移走。它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。
css spacing设置间距
时间不说谎
09-03 141
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
css radius
时间不说谎
09-03 512
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
CSS实现水滴效果图
N201871643的博客
08-26 1120
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
CSS优化实践
乐辞的博客
08-31 620
CSS优化实践，在构建高性能网站时，CSS的优化是不可忽视的环节。通过以下几个实践方法，你可以显著提升页面加载速度和响应能力，从而为用户提供更流畅的体验。本文将详细介绍一些有效的CSS性能优化技巧。
CSS实现DIV水平展示
最新发布
weixin_43159039的博客
09-03 396
1、Flexbox 方法：使用来创建一个弹性盒子布局。用于在主轴上均匀排列两个 div。每个 div 设定了宽度和边框样式。2、使用Flexbox对多个div的水平排列比float简单。
CSS 的object-position属性
读心悦
08-30 1085
CSS 属性用于指定一个替换元素（如或）的内容在其使用的盒子（即容器）内的对齐方式。这个属性与object-fit属性一起工作，object-fit控制了元素内容如何适应其容器的大小，而则决定了内容在容器内的具体位置和裁剪方式（当object-fit设置为cover或contain时）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值