zoukankan      html  css  js  c++  java
  • CSS+DIV网页样式与布局:第二章:CSS的基本语法

    第二章:CSS的基本语法

    一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的)。用户只需要

    通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。

    1、标记选择器(列如  <p> <ul>    p{color:green;})

    2、类别选择器(列如 <p class="p1">    .p1{ color:green;font-size:20px;})

    3、ID选择器(例如  <p  id="p1">         #p1{color:green;})

    注意:页面中id最好不要重复(会导致javascript在查找id时出错)。

    二选择器声明(每个选择器的属性都可以一次声明多个,选择器本身也可以同时声明多个,并且任何形式的选择器(包括标记选择器、class选择器、ID选择器等)都是合法的。)

       1、集体声明(列如:   h1,h2,h3{color:green;font-size:12px;}),使用集体声明条件:这些选择器的风格完全相同,或者有部分相同。

       2、选择器的嵌套(通过嵌套的方式,对特殊位置的HTML标记进行声明,列如:<p><b></></p>    p b{color:green;font-size:12px;})

       嵌套选择器的使用非常广泛,不只是嵌套的标记本身,类别选择器和ID选择器都可以进行嵌套。例如:   .special  i{ color:green;}  

                  #one   li{padding-left:5px;}

                  td.top.top1 strong {font-size:16px;} 

      3、CSS的继承(简单的说就是将各个HTML标记看作一个个容器,其中被包含的小容器会继承所包含它的大容器的风格样式。)

             CSS继承是指字标记会继承父标记的所有样式风格,并可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记。

    第三章:CSS控制文字效果

    一、CSS文字样式(文字的字体、大小、颜色)

          字体:font-family属性,例如:p{ font-family:黑体,Arial,宋体,sans-serif;}

          注意一些字体的名称中间会有空格,列如 Times New Roman,这时需要用双引号将其引起了,如"Times New Roman"

         文字大小:font-size属性,列如p{font-size:12px;}

        最常用的单位:px 其显示大小和显示器的大小及其分辨率有关。采用“%” 或者“em”都是相对于父标记而言的比例,如果没有设定父标记的字体大小,则相对于浏览器的默认值。

         文字的颜色:color属性  ,列如  p{color:green;}

         注意:在设置某一个段落文字颜色时,通常可以利用<span>标记,将需要的部分进行单独标注,然后再设置<span> 标记的颜色属性。

        文字的粗细:font-weight属性,列如   span.five{font-weight:normal;}   span.six{font-weight:500;}

        斜体:font-style属性   列如:  h1{font-style:italic;}

        字的下划线、顶划线、删除线:text-decoration 属性   例如:p.one{text-decoration:underline;}

       英文字母大小写:text-transform属性   列如:p.one{text-transform:uppercase;}

       

    二、CSS段落文字(文字的属性对段落同样适用)

          1、段落的水平对齐方式 text-align属性  (它的值可以设置为左、中、右和两端对齐等。)

    列如:p.left{text-algin:left;}     p.right{text-algin:right;}

         2、段落的垂直对齐方式   vertical-align属性  列如:td.top{vertical-align:top;}    td.bottom{vertical-algin:bottom;}  注意:该属性对于块级元素并不起作用,列如<p> <div>等,但是对于表格而言,这个属性则显得十分重要。

        3、行间距和字间距   行间距line-height属性  列如:p.one{line-height:8pt;}  p.two{line-height:1.5em;}

                                         字间距  letter-spacing属性  列如:p.one{letter-spacing:-2pt;}

      p.two{letter-spacing:5em;}

    4、首子放大 主要是通过float语句对首子下沉进行控制,并且用<span>标记,对首子设置单独的样式,达到突出显示的目的。列如:

          p  span{

                 font-size:60px;

                 float:left;

                 padding-right:5px;

                 font-weight:bold;

                 font-family:黑体;

                 color:yellow;

           }

    第四章:用CSS设置图片效果(包括图片的边框、对齐方式和图文混排等)

          1、图片的边框   boder属性     子属性 border-style定义边框的样式如 虚线、实线或者点划线等

    border-color定义边框的颜色   border-width定义边框的粗细  

    列如:   img.test1{

                     border-style:dotted;

                     border-color:#FF9900;

                     border-5px;

                 }

    在css中还可以分别设置4个边框的不同样式,即分别设定  border-left、border-right 、 border-top   、border-bottom

    列如:img{

               border-left-style:dotted;

               border-left-color:#FF9900;

               border-left-5px;

              }

    熟练之后,border属性还可以将各个值写在同一个语句中,用空格分离。列如

          img.test1{

                 border:5px   double   #FF00FF;//将各个值合并

           }

         img.test2{

               border-right:5px  double  #FF00FF;

               border-left:8px   solid   #0033FF;

         }

    除了border属性可以将各个属性值写在一起,css的很多其他属性也可以进行类似的操作,列如font以及margin   padding

    列如:

        p{

             font:italic  bold  30px Arial,Helvetica,sans-serif;

             padding:0px 5px 0px 3px;

          }

    2、图片的缩放   width   height 两个属性来实现   列如  img.test1{70%; height:110px;}

    3、图片的对齐 横向对齐方式  text-align   图片的对齐不能直接设置图片的text-align属性,而是通过设置父元素的该属性来实现的。

    4、图文混排  float属性来实现文字环绕。

    5、图片与文字间距   只需要给图片设置padding属性即可。列如

        img{

            float:left;

            margin-right:50px;

            margin-bottom:25px;

        }

       第五章:用CSS设置网页中的背景

    1、背景颜色   页面背景色   background-color属性

    2、页面的背景图片  background-image属性   列如  body{background-image:url(03.jpg);}

    3、背景图片的重复  background-repeat属性  重复方式包括(水平重复、竖直重复及不重复)

    列如

          body{

               padding:0px;

               margin:0px;

               background-image:url(bg1.jpg);

               background-repeat:repeat-y;

               background-color:#0066FF;

          }

    4、背景图片的位置   background-position属性   

       列如   body{

                    padding:0px;

                    margin:0px;

                    background-image:url(bg4.jpg);

                    background-repaeat:no-repeat;

                    background-position:bottom  right;

                   background-color:#eeeee8;

                 }

    5、固定背景图片   background-attachment属性  值为fixed来轻松实现效果(对于大幅的背景图片,当浏览器出现滚动条时,通常不希望图片随着文字的移动而移动,而是固定在一个位置上。)

     6、添加多个背景图片(在css中一个标记只能用一次background属性,因此只有给多个标记添加不同背景来实现类似的效果,如在body标记设置了背景图片的基础上再添加table和div等标记。)

    7、背景样式综合设置     background: blue  url(bg7.jpg) no-repaeat  fixed  5px  10px  ;

    第六章:用CSS设置表格与表单的样式

    1、CSS与表单  表单中的元素(输入框、文本框、单选项、复选框、下拉菜单和按钮等。<form>、<input>、<textarea>、<select>、<option>等)

  • 相关阅读:
    oracle数据库体系架构详解
    数据库迁移之从oracle 到 MySQL
    一个专业DBA应具备的技能
    Oracle 内存参数调优设置
    正向代理与反向代理的区别
    负载均衡的几种常用方式
    Java虚拟机JVM学习07 类的卸载机制
    Java虚拟机JVM学习06 自定义类加载器 父委托机制和命名空间的再讨论
    Git 撤销修改
    Git 分支管理和冲突解决
  • 原文地址:https://www.cnblogs.com/czlovezmt/p/10245268.html
Copyright © 2011-2022 走看看