Web之CSS

来源：互联网发布：python idle命令行参数编辑：程序博客网时间：2024/05/22 09:50

一、CSS的概述(了解)
     * CSS cascading stylee sheet 重叠样式表
     * 作用：给HTML的元素施加样式
     * 为什么用CSS：
              HTML的缺陷： a . HTML的浏览器必须要足够庞大和智能
                              b . HTML不能够适应多种设备
                              c . 功能更不够强大
                              d . 数据和样式没有分离

               CSS优点 : a. 数据和样式分离、
                            b .效率提高了
                            c. 使得整个网站整体的视觉效果统一了
                            d. css 节省了下载流量
     * css也是由浏览器直接解析(从上到下)


二、CSS语法
          p{color：red;}

          选择器{属性名：属性值 ;}}
              *选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
              *属性名和冒号之间最好不要有空格。

三、CSS和HTML的结合方式
     CSS代码理论上位置是任意的，但通常写在style标签里
     CSS和HTML的结合方式有3种：
          a. 行级样式表:采用style属性,范围只针对此标签适用
                    <div style = "border:1px solid red ;">大家好</div>
          b. 内嵌样式表:采用<style>标签完成。范围针对此页面

display属性：none/block; none表示不现实，block表示显示。常结合Javascript使用*************

text-decoration：none;取除下划线，

取值：none || underline || blink || overline || line-through

常用于a标签去除超链接的下划线

     • CSS中尺度单位的介绍
     CSS的单位:
a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡
               b.相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)
     设置table的常用属性          ********************888
          table{
               border:1px solid green;
               border-collapse:collapse; /*相当于html属性中的cellspacing*/*************
          }
          table td{
               border:1px solid green;
          }

table tr:hover{

background-color:red;

}

     •字体设置
             p{
                    font-size:50px;    /*字体大小*/
                    font-style:italic ; /*斜体*/
                    font-weight:bold; /*粗体*/
                    font-family:幼圆; /*字体类型*/
                    font-variant:small-caps; /*小写变大写*/
               }
     •文本设置
             p{
                    letter-spacing:0.5cm ; /*字母间距*/
                    word-spacing:1cm;   /*单词间距*/
                    text-align:center;   /*在所包含容器的中间*/
                    text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/**********
                    text-transform:lowercase; /*单词字体大小写*/
                    color:red ;
               }
     •背景设置

  注意：给某个容器设定background属性时，需要先设定width和height属性，否则很容易无法显示background属性**********
           body{
                    background-color:#ff99ff ; /*背景颜色*/
                    background-image:url(images/2.gif) ; /*背景图片*/
                    background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/
                    background-position:center right; /*背景位置第一个参数表示垂直位置，第二个表示水平位置*/
                    background-attachment: scroll ;           /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/
               }
     •列表设置************************
     ul li{
                    list-style:none;    /*列表前样式，none表示取消列表前边的样式符*/
                    list-style-image:url(images/2.gif) ; /*列表项前图片*/
                    margin-left:80px;
               }
     •盒子模型(border margin padding)

               padding:是内容到边的距离
               border: 是边的粗细
               margin:是控件到控件的距离

     •定位设置(position,float,clear,z-index)*************

float：控件按正常(代码顺序)排列称为顺序流. 当用了float和position设定为absolute的时候，此控件将脱离顺序流。

取值：left，center,right

               #d{
                    position: absolute;    /*
                                        1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流
                                        2.相对定位: 相对的是自己在顺序流中原来的位置
                                   */

                    left:100px;    /*横坐标*/
                    top:100px;     /*纵坐标*/
                    border:1px solid red ;
                    width:100px;
                    height:100px;
                    background-color:#ff66ff;
               }

             #d1{
                    position: relative;    /*相对位置*/
                    left:100px;
                    top:100px;
                    border:1px solid green ;
                    width:100px;
                    height:100px;
                    background-color:#339900;
               }

               span{
                    position: relative;
                    left:20px;
                    top:20px;
               }
           z-index:值任意，值越大离我们越近

overflow:auto; /*当内容过多超出容器范围的时候怎么办,auto,hidden,visible,scroll，一般情况下使用auto，表示交给浏览器处理，浏览器会根据内容多少决定是否添加scroll滚动条*/

#content{
          width:200px;
          height:100px;
          border:1px solid red;
          overflow:auto;
     }
效果如下

     .光标样式设置(cursor)

sursor：hand;光标变成手的形状，或者有pointer，hand有些浏览器可能不支持，pointer也是变成手的形状，pointer比hand标准

七、滤镜(了解)

0 0