CSS基础 {属性：值;}-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS基础 {属性：值;}

高洛峰

Oct 08, 2016 pm 05:23 PM

1.CSS是成叠样式表（Cascading Style Sheets）的缩写.它用于定义HTML元素的显示形式.
2.将CSS引入HTML的方式有三种：
   a.外部样式表：

    b.嵌入样式表：

c.内联样式表：
属性名为style 举例:

3.CSS中的选择器：
A:简单选择器；
    a:元素选择器；元素 { 属性: 值; }
    b:类选择器；.类名 { 属性: 值; } 注意有个点。
    c:ID选择器；#id名 { 属性: 值; } 注意有个#，ID选择器只能被引用一次，而类选择器可以被多次引用。
    d:伪类选择器；（有四个状态） 1、a:link{ } (未访问的链接)
                             2. a:visited{ }(已访问的链接)
                             3. a:hover{   }(鼠标在链接上)
                             4. a:active{   }(激活链接)
    e:伪元素选择器；1, p:first-line{ }
2,   p:first-letter{   }
4.复合选择器：
    a:交集选择器：交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。
       其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格。
         eg:p.special{   }
            h3.cls{    }
            (以上选择器匹配)

    b:并集选择器：
              eg: h1,h2,h3,h4,h5,h6{    }
                  h2.special,.special,#one{    }

    c:后代选择器：(继承最近的)后代选择器产生的影响不仅限于元素的"直接后代"，而且会影响到它的"各级后代"
5.理解样式表的层叠:
   层次的优先级别从小到大依次为：
                            外部样式表
嵌入式样式表
内联样式
如果是同一个样式表中不同选择器，优先级别从小到大依次为：
                                                   元素选择器
类别选择器
ID选择器

                                          CSS的基本属性---文本样式
1.长度单位 1.px   2.em
2.颜色定义   color
3.设置字体样式   设置文字的字体   font-family："黑体";
                 设置字体倾斜效果 font-style：Italic；
                 设置文字加粗效果   font-weight:bold; （粗体)   font-weight:bolder; (加粗)
                                   font-weight:100(范围100-900，数字越大字体越粗)

                 设置英文字母大小写转换   text-transform: capitalize; (单词首字母大写)
                 设置控制文字大小   font-size:..px/..%/..em
                 设置文字的装饰效果   text-decoration: none/underline/line-through(删除线)/overline(顶线)；

4.设置段落样式   设置段落首行缩进 text-indent：..em(..个标准字符大小的距离)/..px；
                设置字词间距离     letter-spacing(字母):..px;          word-spacing（单词）:..px;
                 设置段落内部的文字行高   line-height:
                控制文本的水平位置   text-align:left/right(右对齐)/center（居中）/justify（两端对齐）
                设置文字与背景颜色   color:...;       background-color:...;
                设置段落的垂直对齐方式   vertical-align:...;(只对表格单元格中的元素起作用)

                                           css的基本属性---图像样式
1.设置图片边框：border-width:(粗细）    ;   border-color:（颜色）     ; border-style:（线性）     ;
     不同的边框可以设置不同的样式，eg:border-left-style、      border-top-width    ....   solid实线
2.图片的缩放： width   height （百分比，像素）
3.图文混排：
文字环绕：float (浮动)
    图片与文字对齐方式：水平对齐 text-align:

<br/>

로그인 후 복사

垂直对齐 vertical-align:
4,。设置背景颜色与图像：background-color:         background-image:url(地址)
      可以使用background-repeat：来控制平铺，repeat：水平和垂直方向平铺，默认值。
                                            no-repeat：不平铺。
                                            repeat-x：只沿水平方向平铺。
                                            repeat-y：只沿垂直方向平铺。
5.设置背景图像位置：background-position：（可以设置两个值 eg:left top）
6.设置背景图片固定位置：background-attchment:fixed;          图片滚动： scroll
                            补充：去掉无序列表前的小圆点，list-style: none;
                                  上标用^{eg:图像^样式

                                                  定位（查看position7）
1.绝对定位：（设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。）
             position: relative；
             top:..px;
             left:..px;
2.相对定位: ( 绝对定位的元素的位置相对于最近的已定位的元素，
            如果元素没有已定位的元素，那么它的位置相对于最初的包含块。)position：absolute;
                                                                        top:..px;
                                                                        left:..px;

                                                  css基本属性—表格样式（les8）
1.控制表格：cellspacing：列间距    cellpadding：列的内边距
           border：表格边框       bgcolor：表格颜色     border-collapse:合并相邻列的边框线
           border-spacing : 设置列的间距
   设置表格宽度：table-layout:fixed(固定)或者auto(自动)}