css样式

 一，css的优势

1，内容与表现分离：

        html内容和css样式分别写入各自文件中。

2，减少网页代码量：

        网站中不同网页引入同一个css样式，可以有效减少代码量。

3，有利于被搜索引擎收录：

        运用独立于页面的css，有利于网页被搜索引擎收录。

4，提高网页浏览速度：

        网页中使用css在减少代码量的同时，可以提高用户的浏览速度，节省流量。

5，网页布局灵活：

        css提供了丰富的样式文档，使开发者更方便灵活的对网页进行布局和美化。

6，网页风格统一：

        网站中不同网页引入同一个css样式，保证风格同一。

二，css选择器

1，类(class)选择器

        类选择器定义：

                body标签中的所有标签都有class属性。

                注：class名称可以重复使用。

        类选择器使用：

                类（class）选择器使用标志符（句点）开头

                后面写上类的名称。

2，id选择器

        id选择器定义：

                body标签中的所有标签都有id属性。

                注：一个页面中只能使用一个id名，id名必须是唯一。

        id选择器使用：

                id选择器使用散列符号（#）开头，后面写上id的名称。

3，标签选择器

    
学习css基本选择器

 4，css选择器优先级

        id选择器  >  类选择器  >  标签选择器

        即上图运行结果为：

三，网页中引入css样式

1，内部样式表

        将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。

2，内联(行内)样式

        html中的所有标签都有style属性，在style属性中直接写入css样式。

        示例：

         这是内联样式

3，外部样式表

        将css样式单独写入到一个 xxx.css外部文件中。

        （1）使用link标签引入外部css文件。

        （2）使用@import导入外部css文件

        link标签引入外部样式文件：

    
学习css样式优先级

样式优先级（就近原则）

行内（内联）样式  >  内部样式表  >  外部样式表 

(上图运行结果如下)：

四，css基础样式

1，字体样式

font-style	字体风格	normal   默认值，标准文档样式 italic       斜体
font-weight	字体粗细	bold 定义粗体字符 100-900 定义由细到粗的字符
font-size	字体大小	像素：px
font-family	字体类型	“隶书”“楷体”其他

2，文本样式

color	设置文本颜色	red #362596     rgb(32,250,50
text-align	设置元素水平对齐方式	• left  • center  • right
text-indent	设置首行文本的缩进
line-heighttext-	设置文本的行高
decoration	设置文本的装饰	• none: 默认，标准文本 • underline：定义文本下划线 • overline：定义文本上划线 • line-through：定义穿过文本的一条线

3，鼠标样式(cursor)

defalut	默认光标
help	指示可用的帮助
text	指示文档
crosshair	鼠标呈现十字状
wait	等待状态
pointer	超链接指针

4，背景样式

background-color	背景颜色	red #536256         rgb(30,250,13)
background-image	背景图片地址	图片绝对路径         图片相对路径
background-repeat	背景重复方式	no-repeat   不重复 repeat-x      水平重复 repeat-y      垂直重复         repeat         默认重复
backgroposition	背景定位	• 像素： px • 水平方向： left 、 center 、 right • 垂直方向： top 、 center 、 bottom

        背景样式简写：

                background：图片地址，图片重复方式，背景颜色，背景定位

                （属性值之间没有先后顺序）

5，列表样式

list-style-type	（1）无序列表      disc 实体圆心（默认）       circle 空心圆       square 实体方心       none   无列表标记 （2）有序列表      1 / a / A / i  /  I
list-style-image	自定义列表标记为图片 属性值：url(图片路径)
list-stposition	列表标记定位    outside    inside

        列表样式简写：

                list-style:1,列表标记属性2,自定义列表标记图片3,列表标记定位

6,css伪类

link	单击访问前
visited	单击访问后
hover	鼠标悬浮其上
active	单击未释放

五，css高级选择器和盒子模型

1，并集选择器

     多个选择器通过逗号连接而成

div,p,span,.codeup,#helloid{
          color:red;
          font-size:20px;
     }

2，交集选择器

(1)由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格

(2)第一个必须是标签选择器，第二个必须是类选择器或者 ID 选择器

div.codeup{
          color:red;
          font-size:20px;
    }

    div#codeup{
          color:red;
          font-size:20px;
    }

3，后代选择器

        (1)外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔

        (2)标签嵌套时，内层的标签成为外层标签的后代

        (3)使用标签选择器、id选择器、类选择没有先后顺序

div  .codeup{
         color:red;
         font-size:20px;
     }

4，子元素选择器

        通过>号连接在一起而成，仅作于子元素。

div>.codeup{
         color:red;
         font-size:20px;
     }

5，属性选择器

        选取带有指定属性的元素

        选取带有指定属性和值的元素

input[name]{
         border:1px soild red;
    }

    input[type=”text”]{
         border:1px soild red;
    }

    div[ class=“codeup”]{
         color:red;
    }

六，盒子模型

1，外边框(border)

(1)边框样式

属性	说明	样式值
border-top-style	上边框样式	none ：无边框 solid ：实线边框 dashed ：虚线边框 dotted ：点状边框 double ：双线边框 hidden ：与 none 相同，应用于解决边框冲突
border-right-style	右边框样式
border-bottom-style	下边框样式
border-left-style	左边框样式
border-style	设置四个边框样式

(2)边框颜色

        border-top-style

        border-bottom-style

        border-left-style

        border-right-style

(3)边框粗细

        border-top-width

        border-right-width

        border-bottom-width

        border-left-width

        简写：border-width:上，右，下，左

2，内边距(padding)

        padding-top：顶部内边距

        padding-bottom：底部内边距

        padding-right：右边内边距

        padding-left：左边内边距

        

        box-sizing属性:box-sizing:border-box----->•盒子的实际高度和宽度包括元素内容、边框和内边距

3，外边距(margin)

        margin-top：顶部外边距

        margin-bottom：底部外边距

        margin-left：左部外边距

        margin-right：右部外边距

简写：margin:上下边距，左右边距；

4，标准文档流

(1)块级元素：

-

、

、

、列表等

总是在新行上开始，占据一整行

高度，行高以及外边距和内边距都可控制

宽度始终是与浏览器宽度一样，与内容无关

    它可以容纳内联元素和其他块元素

(2)行内(内联)元素

、、、等

和其他元素都在一行上

高，行高及外边距和内边距部分可改变

宽度只与内容有关

行内元素只能容纳文本或者其他行内元素

不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用

5,display属性

属性值	作用
none  设置元素不会被显示	控制元素的显示和隐藏 块级元素和内联（行内）元素的转变
inline 元素显示为内联（行内）元素
block 元素会被显示为块级元素
inline-block 行内块元素

七，css浮动

floa属性：

        left：元素向左浮动。

        right：元素向右浮动。

        none：默认不浮动。

    
    
    
    



    

        
    
    

        
    
    

        
    
    
学习css浮动

运行结果：

 clear属性：

        left：不允许右侧有浮动元素。如果右侧有浮动元素，则重启一行。

        right：不允许右侧有浮动元素。

        both：左右两侧都不允许有浮动元素。

overflow属性：

        auto：自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容。

        scroll：内容会被修剪，但是浏览器会显示滚动条以便查看超出内容。

        hidden：内容会被修剪，并且超出的内容是不可见的。

        visible：默认值。内容不会被修剪，会呈现在盒子之外。

八，css定位

1，position属性

(1)static：默认值，没有定位，元素会以标准文档输出。

(2)相对定位(relative)

        相对自身位置偏移

        <1>设置相对定位的元素会相对它原来的位置，通过指定偏移，到达新的位置。

        <2>设置了相对定位的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元

               素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。

        <3>相对定位可进行top、right、bottom、left方向的定位。

    
11111111
    
22222222
    
33333333

运行结果：

(3)绝对定位(absolute)

        根据离本身最近的已经定位的祖先元素进行偏移。

        <1>使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

        <2>相对定位可进行top、right、bottom、left方向的定位，定位偏移单位为 px。

        <3>绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。

    

        
11111111
    
    
22222222
    
33333333

运行结果：

 

(3)固定定位(fixed)

        相对于浏览器窗口进行定位。不会根据滚动条的滚动而进行偏移 。

2，z-index属型

        调整元素定位时重叠层的上下位置。

        <1>z-index属性值：整数，默认为 0。

        <2>设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。

        <3>z-index值大的层位于其值小的层上方。