css和div

2021-12-02 18:06:43

1.css：（Cascading style sheet）
    使用css的原因：
    css能够实现内容与样式的分离。但是不容易在界面中维护，调整高度    等难度系数比表格大。
    css后期维护，改变背景颜色，字体颜色等比较方便。
    css精确的控制，实现精美，复杂的页面。
    主要功能：美化网页，实现网页的布局，图片等的定位。（排版与风格设计简化的web开发）
2.使用css基本格式：
      <head>
       <style>
         选择器 {对象的属性：属性值}
       </style>
       </head>
       选择器：就是所要修饰的对象；
3.标签的类型：
     标签选择器：就是容器的名字如<p>（直接写p{；；；}）就可以了。
     类选择器：需要有.在修饰对象的前面。如<p class="text">   .text{;;;;}
     ID选择器：需要#在修饰对象的前面。    如<div id="text">    #text{;;;;}
4.三种选择器的区别：
     标签选择器：如果在body出现标签，全都修饰。
     类选择器：主要有class标示。有class的地方就会被修饰。
     ID选择器：ID选择器是唯一的，只能用一次。
5.选择器的优先级：ID选择器>类选择器>标签选择器
6. 标签css示例
     <html>
     <head>
     <style>
            p{font-size:12px; color:#FFF；}
     </style>
     </head>

      <body>
         <p>这是例子！</p>
     </body>
      </html>
7.类标签示例：
          <html>
          <head>
     <style>
            .text{font-size:12px; color:#FFF；}
     </style>
     </head>

      <body>
         <p class="text">这是例子！</p>
     </body>
      </html>
8.ID选择器：
         <html>
         <head>
     <style>
            #text{font-size:12px; color:#FFF；}
     </style>
     </head>

      <body>
         <p id="text">这是例子！</p>
     </body>
      </html>
9.文本重要的属性：
     字体、字号：
font（缩写形式）

font-weight（粗细）

font-size（大小）

font-family（字体）
     ine-height （行高）

text-align （对齐）

letter-spacing （字符间距）

text-decoration （文本修饰）

white-space （空白处理）
     p元素中文字之间、span元素之间度没有空白。
10.背景属性：
     background （缩写形式）可以连续写属性值。

background-color（背景色）

background-image（背景图）

background-repeat（背景图重复方式） repeat-x水平方向平铺   repeat-y 垂直方向平铺   no-repeat不平铺（一张）repeat两个方向平铺

background-position（位置坐标、偏移量） x y；两个方向的偏移   0px -npx 向上偏移n个像素。
     偏移的用处：主要实现一张图片取各个部位显示。主要用在导航条的制作等。
11.列表（li）常用属性.
     list-style ：有5个属性 none 无风格 disc实心圆 circle空心圆 square 实心正方体 decimal 数字
     制作导航的时候主要用none.
12.用
<ul>
    <li> </li>
    <li> </li>
</ul>制作导航条因为是块标签，分别处在不同的行中，需要把li里面的内容放在一行中，这就需要float浮动属性来完成。
     float：left；向左浮动
     float：right；向右浮动
     float：both；两边
这就实现了导航条那样的内容。注意width:150px 间距（购物车加入收藏）
13.文字下面有下划线：text-decoration:underline;
14.盒子模型
   盒子模型就是把网页中的所有元素看做是一耳光盒子。
   盒子模型主要属性： margin外边界   padding内边界 border边框
   盒子模型的层次：margin bacground-color background-image padding     content    border
15.盒子模型的属性值设置形式：
    margin：上右下左    两个值就是上下一致左右一致    一个值就是四个一致要一个值就是margin-left：px；这种形式。
     padding：类似。
16.border的属性值：border-color 边框颜色

                   border-width 边框宽度
border-style
线条的形式（点虚线实现等）
17.元素的实际占位（实际宽、高）   根据浏览器的不同计算不同。
18.div实现布局 margin：0px auto；居中。需要float等来辅助。

补充：
1. *{
        background-color:white;
      }
     通用选择符，它选择页面中所有的元素。
     组选择：把样式一样的写在一起。
2.用id还是class的选择
     id是唯一的，class不唯一，当需要给页面某个单独的元素指定样式时，就该使用id。需要给一组元素指定样式时，class选择符是首选。

3.letter-spacing字母间距

css和div,布布扣,bubuko.com

css和div

码农公寓

相关文章