CSS样式的处理

不言

发布： 2018-04-24 16:42:44

原创

1580人浏览过

这篇文章主要介绍了关于CSS样式的处理，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

4/23/2018 8:23:35 AM

CSS

晨测：

1. 标准的一个html文件的结构
2. 指定颜色和资源位置的方式
3. 常用标签
    设置各级标题：
    设置段落：
    设置文本格式：
    超链接：
    图片标签：
    表格的基本形式：
    表单标签：
    框架标签：

登录后复制

回顾

今日概要

一、CSS概述
二、CSS的选择器（认识）
三、CSS样式和属性（练习）
四、重构商城首页p+CSS(页面布局)（重点） 浮动/更改显示方式

登录后复制

一、CSS概述

<1>概念

p,就是一个HTML元素，块级元素，通常结合CSS进行页面的布局。
CSS,层叠样式表，给HTML元素增强显示。

登录后复制

<2>作用

样式定义如何显示HTML元素，页面的布局（美化HTML效果）

登录后复制

<3>使用方式

内联样式方式：在当前的元素属性中直接设置style属性，适用性差，只能作用于当前元素。
    style属性是HTML元素通用的属性

内部样式方式：在head标签中，使用<style>标签来设置样式，适用性强，可以同时作用于一个页面的多个元素。

外部样式方式：创建.css样式文件，在此文件中设置元素的样式，在需要使用的页面中使用<link>元素引入。适用性最强，
            可以通过作用于多个页面。

登录后复制

<4>语法

选择器｛
    样式申明
｝

1. 查找需要设置样式的元素  ，选择器可以用来查找元素
2. 设置样式  ，属性名称：属性值 ；属性名称：属性值 ；
3. 例如：
    h1{
        color:#ff0000;
        font-size:25px;
        ...:...;
    }       

注意：样式申明中，如果不是最后一个属性值，后面的分号不可以省略。

登录后复制

<5>特点

继承性：子元素可以继承父元素的样式
层叠性：同一个元素可以使用多个样式，如果不冲突，效果叠加
优先级：默认的样式 ---外部样式  --- 内部样式---  内联样式 （由低到高，就近原则）

登录后复制

二、选择器

<1>元素选择器

语法格式：元素名称{
            样式申明；  
        }       

特点：适用于相同元素的样式设置

登录后复制

<2>类选择器

语法格式： .类属性值{          class属性：属性值
            样式申明；
         }

特点：适用于不相同元素的样式设置    

例如：通过类选择器查找h1元素
        <h1 class="h1class"></h1>

        .h1class{

        }

登录后复制

<3>id选择器

语法格式： #id属性值{
            样式申明；
        }

特点：使用于一个具体的元素的样式设置

例如：通过id选择器查找一个具体的h1标签
        <h1 id="idvalue"></h1>

        #idvalue{

        }

登录后复制

<4>选择器组

语法格式：选择器1，选择器2，...{
            样式申明；
        }

特点：可以在多个不同的选择器中重用样式

例如：
    #idvalue , h1 , .classvalue,p,#idvalue2,.classvalue2{
        background-color:yellow;
    }

登录后复制

<5>派生类选择器

语法格式1：父元素名称 > 子元素名称 {
                样式申明；
          }

特点：子元素选择器，只作用于指定儿子辈的元素

语法格式2：父元素名称   子元素名称 {
                样式申明；
          }

特点：后台选择器，作用于指定的所有后辈元素

例如：
    <p>
        <p>
                <p>
                    <p></p>
                </p>
        </p>
        <p></p>
        <h1><h1>
        <h3></h3>
        <span></span>
    </p>

    <p></p>

登录后复制

<6>属性选择器

语法格式：元素名称[属性="属性值"]{
            样式申明；
        }


例如：<input type="text" />

     input[type="text"]{
        background-color:orange;
     }

登录后复制

<7>伪类选择器

当一个元素的状态发生改变的时候，更改元素的样式

语法格式：
    :link  适用于超链接
    :visited  适用于超链接
    :active   通常适用于按钮    
    :focus    通常适用于输入框
    :hover  鼠标悬浮在元素上时

例如：
    <a hred="#" id="a1"> 请点击我1 </a>
    <a hred="#" id=""> 请点击我2 </a>
    <a hred="#" id=""> 请点击我3 </a>

    #a1:link{
        样式申明；
    }

    #a1:visited{
        样式申明；
    }

登录后复制

三、样式和属性

<1>背景的样式

background-color:颜色值，设置背景颜色
background-image:图片的url，设置背景图片
background-repeat:排列方式，设置背景图片的排列方式
                repeat;
                repeat-x;
                repeat-y;
                no-repeat;

background-attachment:方式，设置背景图片是否跟随内容移动
                scroll;
                fixed;

登录后复制

<2>边框

border: 宽度   样式   颜色  
border: 样式值，（ 设置四个边框的样式 ）       
border-left/right/top/bottom:样式值  (设置各个边框的样式)

登录后复制

<3>浮动的设置和取消（重点）

将元素脱离文档的普通流中，可以向左或者向右浮动，直到他的边框遇到其父边框或者其他浮动元素的边框时停止。

添加元素：<p id="clearp"></p>

         #clearp{
            clear:both;     
         }

登录后复制

<4>盒子模型(重点)

外边距：margin
    margin-left/right/top/bottom:距离；
    margin:距离；
    margin:auto;    //居中效果


内边距：padding
    padding-left/right/top/bottom:距离；
    padding:距离；

登录后复制

<5>文本样式

color:颜色
font-size:字体大小
font-fimaily:字体
font-weight:粗体

登录后复制

<6>表格属性

border:边框
border-collapse:collapse;去除单元格之间的间距

登录后复制

<7>列表属性

list-style-type: 样式；     列表显示的样式

list-style-image:url(“图片资源位置”)； 列表显示的样式

登录后复制

<8>鼠标样式

    cursor:help;
          wait;
          default;
          pointer;
          ... ...

登录后复制

<9>显示方式

display属性，更改元素的显示方式：
    block ,将行内元素的显示方式转换成块级元素的显示方式；（上下显示）
    inline，将块级元素的显示方式转换成行内元素的显示方式；（左右显示，不能设置宽高）
    inline-block，将元素转换成行内块元素；（左右显示，设置宽高的）

<p></p>
<p></p>
<p></p>

p{
    display:inline;
}

登录后复制