CSS

css

css的简介

css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

css和html的结合方式

1.在每个html标签上面都有一个属性 style,把css和html结合在一起

2.使用html的一个标签实现<style>标签,写在head里面

        <style type="text/css">

                css代码

        </style>

3.在style标签里面 使用语句

            @import url(css文件的路径)

                第一步:创建一个css文件

4.使用头标签 link, 引入外部css文件

        <link rel="stylesheet"  type="text/css"  href="css文件的路径"/>

css优先级

         由上到下,由外到内,优先级由高到低

        格式:   选择器名称 {属性名 :   属性值:  属性名 :   属性值:。。。。。。 }

css的基本选择器

1.标签选择器:使用标签名作为选择器的名称

            div{

                    back-ground:gray;

                    color:red

                }

2.class选择器

        每个html标签都有一个属性 class

            <div class=""></div>

            .haha{     

                    back-ground:gray;

}                   

3.id选择器

            每个html标签都有一个属性 id

优先级 :style > id选择器 >  class选择器 >  标签选择器

css扩展选择器

1.关联选择器

    <div><p>wwwwww</p></div>

    设置div标签里面p标签的样式,嵌套标签里面的样式

            div p{

                    back-ground:gray;

                   }

2.组合选择器

    <div>11111</div>

    <p>222222</p>

    把div和p标签设置成相同的样式

         div ,p{

                            back-ground:green;

                   }

3.伪元素选择器

        css里面提供了一些定义好的样式,可以拿过来使用

                    比如超链接的状态

                        原始状态        鼠标放上去的状态       点击           点击之后

                        link                   hover                       active             visited

css盒子模型

1.边框

    border:统一设置

    上 border-top

    下border-bottom

    左border-left

    右border-right

2.内边距

    padding:统一设置

          上 padding-top

          下padding-bottom

          左padding-left

          右padding-right

3.外边距

    margin:统一设置

           上 margin-top

          下margin-bottom

          左margin-left

          右margin-right

css的布局漂浮属性

float:

            属性值

                    left:文本流向对象的右边

                    right:文本流向对象的左边

css的布局定位

position:

                属性值:

                        absolute:将对象从文档流中拖出

                        relative:对象不可层叠,不会把对象从文档流中拖出

        

     

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,102评论 1 91
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 2,400评论 0 39
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 917评论 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 23,600评论 1 45
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 932评论 0 14