码迷,mamicode.com
首页 > Web开发 > 详细

html学习-css

时间:2017-02-19 23:30:58      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:宽度   border   分组   css   指定   range   sel   images   text   

1.css初识

css 中文解释:层叠样式表,把html比作木偶的话,css就是木偶的衣服,他的外在都能通过css来修饰,js则能是html动起来。产生用户交互。。。

1.1css样式表类型

css样式类型:

  行内样式:

  内部样式:

  外部样式(推荐使用):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部样式:直接将css写入到css文件中,加载使用-->
    <link rel="stylesheet" href="css/top.css">
    <style>
        /*内部样式:将样式写到head中的style中*/
        #pg-index{
            background-color: #00AA88;
        }
    </style>
</head>
<body>
    <!--行内样式:直接将css样式写入到标签内部-->
    <div id="pg-index" style="color: red"></div>
</body>
</html>

1.2css选择器类型

  标签选择器:(html标签)

  类别选择器:(class选择器)

  ID选择器:

  层级选择器:

  分组选择器:

  通用选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部样式:直接将css写入到css文件中,加载使用-->
    <link rel="stylesheet" href="css/top.css">
    <style>
        /*内部样式:将样式写到head中的style中*/
        *{
            /*通用选择器*/
            font-family: "Microsoft YaHei", "Hiragino Sans GB";
        }
        body{
            /*标签选择器*/
            margin: 0;
        }
        #pg-index{
            /*id选择器*/
            background-color: #00AA88;
        }
        .pg-index2{
            /*类选择器(class选择器)*/
            float: right;
        }
        #pg-index p{
            /*层级选择器*/
            font-size: 20px;
        }
        #pg-index,.pg-index2{
            /*分组选择器*/
            margin-left: 10px;
        }
        #pg-index p:hover{
            /*伪类选择器*/
            background-color: #00CC00;
        }
    </style>
</head>
<body>
    <!--行内样式:直接将css样式写入到标签内部-->
    <div id="pg-index" class="pg-index2" style="color: red">
        <p>主体内容</p>
    </div>
</body>
</html>

  伪类选择器:

:link      定义超链接默认样式
:visited    定义访问过的样式
:hover     定义鼠标经过的样式
:active     定义鼠标按下的样式

a:link { color:#ff0000; }  /*默认样式,超链接文字为红色*/
a:visited { color:#00ff00; }  /*访问过后,超链接文字为绿色*/
a:hover { color:#0000ff; }  /*鼠标经过,超链接文字为蓝色*/
a:active { color:#ffff00; }  /*鼠标按下时,超链接文字为黄色*/

1.3css语法结构

每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

技术分享

在css的三个组成部分中,“对象”是很重要的,它指定了对哪些网页元素进行设置,因此,它有一个专门的名称——选择器(selector)

 1.4css选择器优先级

技术分享

 <style type="text/css">
            #show1{color:gold;}
            .show {color:pink;}
            h1 {color:red;}
            * {color:green;}
 </style>
 </head>
 <body>
     <h1 id="show1" class="show" style="color:gray;">这是选择器优先级测试</h1>
 </body>

 1.5css文本段落属性及边框

边框设置:border
宽度,样式,颜色 (border: 1px solid red;)

文本行高:line-height
语法: line-height:行高值(像素)

水平对齐: text-align
      left:左对齐;
      right:右对齐
        center:居中对齐

body{
    /*标签选择器*/
    border: 1px solid red;
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin: 0;
    
}

1.6css文字属性

字号:font-size
语法:font-size:大小的取值(像素值)

文字颜色:color
语法:Color:颜色取值方式
     color:#292378; //6个十六进制数获得颜色
     color:#A64; //#AA6644的缩写
   color:red; //颜色关键字定义颜色
   color:rgb(100,159,170); //rgb定义颜色

1.7css背景属性

背景颜色:background-color
关键字:red pink orange

背景图像:background-image
使用background-image属性可以设置元素的背景图像。
语法:background-image:url(图像地址)

背景重复:background-repeat
语法:background-repeat:取值
   Repeat(默认) 背景图像平铺排满整个网页
     repeat-x 背景图像只在水平方向上平铺;
     repeat-y 背景图像只在垂直方向上平铺。
   no-repeat 背景图像不平铺

背景位置:background-position
       background-position-x:200px ;
       background-position-y:100px;

技术分享

技术分享

1.8css背景图片实例

技术分享

<style>    
    #myimg{        
        border:1px solid red;        
        height:18px;        
        width:18px;        
        background-image: url(‘2.png‘);
        background-position-y:138px;    
}
</style>
<body>    
    <div id="myimg">    </div>
</body>

1.9css位置属性

margin外边距填充属性

边距属性
margin是对外元素的距离,用来控制元素本身的浮动位置
  四边距margin
  上边距margin-top
  下边距margin-bottom
  左边距margin-left
  右边距margin-right

margin 10px 20px 30px 40px;
  提供一个,用于的四边;
  提供两个,第一个用于上-下,第二个用于左-右;
  如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
  提供四个参数值,将按上-右-下-左的顺序作用于四边;
  居中显示

技术分享

padding内边距填充属性

padding是对内元素,用来控制元素内部元素的位置
  四边填充 padding
  上填充 padding-top
  下填充 padding-bottom
  左填充 padding-left
  右填充 padding-right

padding 10px 20px 30px 40px;
  提供一个,用于的四边;
  提供两个,第一个用于上-下,第二个用于左-右;
  如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
  提供四个参数值,将按上-右-下-左的顺序作用于四边;

 技术分享

2.css浮动属性

技术分享

2.1css显示属性

Display显示属性:
block:将元素变成块级标签,可以设置高度和宽度
Inline:将元素变成行内标签,不能设置高度和宽度
Inline-block:同时具有两种
none:标签消失

<span style="background-color: gray;height:70px;width:20px;">行内标签</span>

2.2css溢出处理

技术分享

 技术分享

 

 技术分享

2.3css位置属性

技术分享

技术分享

技术分享

技术分享

2.4css层级优先级

技术分享

参考链接:

http://www.w3school.com.cn/

http://css.doyoe.com/

http://www.runoob.com/cssref/css-reference.html

html学习-css

标签:宽度   border   分组   css   指定   range   sel   images   text   

原文地址:http://www.cnblogs.com/zhanmeiliang/p/6417672.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!