html_之css

css 有三种形式的写法：

直接在标签里写入style样式
在<head></head>里写入<style></style>样式
直接创建.css 文件通过<link/>引入css文件

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="css文件名.css"/>  <!--把创建的css文件中所有的样式都引用到了本文件-->

    <style>

        .cc{

            color:red;

            font-size:18px;

        }

        .ccd{

            color:#ddd;

        }

    </style>

</head>

<body>

　　<div id="122" style="color:red;font-size:15px;"> 第一种 </div>

　　<div class="cc ccd"> 第二种 </div>  <!--优先级：当同时引用两个样式时class=“cc ccd”，style里越往后优先级越高-->

　　<div class="bb">第三种</div>

</body>

</html>

选择器 :

标签选择器

把HTML中‘所有’的a标签应用此样式

a{

     color:red;

}

　　 2. 把input类中type=“text”的标签都应用这个样式

input[type="text"]{

    background-color:black;

    color:white;

}

ID选择器

例：id 是uu的标签应用这个样式

　　　 <div id="uu"> 我是谁我在哪儿？.？ </div>

#uu{

    background-color:black;

    color:white;

}

层级选择器

　　例:

.c a div .d{

    此样式只应用于c样式的标签下的a标签下的div标签下的标签的d样式

    (若省略div则是a标签下的所有d样式都被应用)

    若a标签中有id=i8，则此处的css样式中的a可写为#i8

}

组合选择器

例 : 如下a样式和p样式可写为组合样式a,p{ }

a{

}

p{

}

a,p{

    a标签或p标签都可以应用这个样式

    也可以和层级选择器一起应用

}

background-color	背景颜色
background-image	背景图片
background-image：url("图片路径")	如果没有指定图片宽度，图片默认会平铺；如果指定的高度大于图片高度，图片也会默认向下平铺
background-repeat	repeat-x;不允许在x轴重复，repeat-y;不允许在y轴重复,no-repeat;不允许重复
background-position：0px 119px;	如望远镜，随着望远镜的移动看见的景物也不同

线的粗细实线虚线线的颜色
<div style="border: 5px dotted #3D3127;"></div> dotted:虚线 solid : 实线
border-left:左边框 border-right：右边框 border-top:上边框 border-bottom：下边框

参数：

none	隐藏标签
block	把块级标签变为内联标签
inline	把内联标签变为块级标签

参数：

pointer	鼠标移动到标签变为小手
move	鼠标移动到标签变为十字拉拽
url('图片路径')	鼠标移动到标签变为图片

float: left; right; 在层级标签中一旦子类标签被设置为float，则父标签将不会被撑起来了

解决方法一：

<html>

    <head>

            <title> </title>

    </head>

    <body>

        <div style='background-color:blue'>

    　　　　<div style='background-color:red;float:left;width:20%;'>123</div>

    　　　　<div style='background-color:green;float:left;width:50%;'>123</div>

   　　　　 <!----width 的百分比是相对于父标签进行划分的--------->

   　　　　 <div style='background-color:green;float:right;width:10%;'>123</div>

   　　　　 <div style='clear:both;'>这里可以什么都不写，但是必须有，
　　　　　　　　　　　　　　相当于把飘起来的标签拉回来了,父标签里的background才会在剩下的20%显现出来    </div>

　　　　</div>

    </body>

</html>

解决方法二：利用after，before伪类给内容前后插入数据

<html>

    <head>

        <title> </title>

        <style>

            .c1{

                float:left;

                width:20%;

                background-color:red;

            　　　　}

            .c2{

                float:right;

                width:50%;

                background-color:green;

          　　　　  }

            .clearfix:after{

                content:'.';

                clear:both;

                visibility:hidden;   <!-- 把内容‘ . ’隐藏 -->

            }

        </style>

    </head>

    <body>

        <div class='clearfix' style='background-color:#45e8e7;'>

            <div class = 'c1'>342</div>

            <div class = 'c2'>33422</div>

        </div>

    </body>

</html>

参数：

fixed

固定位置

定位在窗口的某一位置，fixed-top 离'窗口'顶部距离; fixed-left 离左边距离;

fixed-bottom 离下面的距离; fixed-right 离右边的距离

absolute

绝对位置

一次固定在窗口的指定位置和relative合用

relative

相对位置

本身不产生任何效果，和absolute合用

小例子:

<html>

    <head>

        <title> </title>

    </head>

    <body>

        <div style='height:2000px;background-color:pink'>

            <div style='position:relative;background-color:#aeafee;height:300px;width:300px;float:left;'>

            <div style='position:absolute;bottom:0px;right:0px;'>定位</div>    <!-- ‘定位’定位在了blue框里的右下角  -->

        </div>

        <div style='position:fixed;bottom:50px;right:50px;'>返回顶部</div><!--'返回顶部'定位在’窗口‘的右下角-->        

</div>

    </body>

</html>

透明度可设置范围为：0-1，注：ie浏览器设置透明度用filter:alpha(opacity=sqlN)，其中sqIN设置范围：0-100

小例子：通过fixed固定设置两层div（注： ）

<html>

    <head>

        <title> </title>

        <style>

            .c{

                z-index:10;

                position:fixed;

                top:0px;

                left:0px;

                bottom:0px;

                right:0px;

                background-color:black;

                color:white;

            }

            .c1{

                z-index:12;

                position:fixed;

                top:0px;

                left:0px;

                bottom:0px;

                right:0px;

                background-color:red;

                color:white;

                opacity:0.3;

            }

        </style>

    </head>

    <body>

        <div class='c'>ihbk</div>

        <div class='c1'>sfadsdfds</div>

    </body>

</html>

padding ：内边距 // margin：外边距

padding: padding-left:左边距; padding-right:右边距; padding-bottom: 下边距; padding-top: 上边距;

margin: margin-left:左边距; margin-right:右边距; margin-bottom: 下边距; margin-top: 上边距;

padding参数设置的三种方式：

padding：20px; 把上下左右边距都设置为20px;
padding:10px 20px; 把上下边距设置为10px; 左右边距设置为20px;
padding:10px 20px 30px 40px; 把上边距设置为10px; 把左边距设置为20px; 把下边距设置为30px; 把右边距设置为40px;

小例子：

<html>

    <head>

        <title> </title>

        <style>

            .c{

                height:70px;

                border:1px solid red;

            }

            .c1{

                height:50px;

                background-color:pink;

                margin-top:10px;

            }

        </style>

    </head>

    <body>

        <div class='c'>

            <div class='c1'> ihbk </div>

        </div>

    </body>

</html>

html_之css的更多相关文章

Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
HTML_案例(注册案例CSS版)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS魔法堂：Box-Shadow没那么简单啦:)
前言说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...
CSS魔法堂：重拾Border之——更广阔的遐想
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
CSS魔法堂：重拾Border之——图片作边框
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
CSS魔法堂：重拾Border之——解构Border
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
CSS魔法堂："那不是bug，是你不懂我!" by inline-block
前言每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...
CSS魔法堂：小结一下Box Model与Positioning Scheme
前言对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考. <CSS魔法堂:重新认识Box Model.IFC.B ...
CSS魔法堂：说说Float那个被埋没的志向
前言定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

随机推荐

redis基础知识思维导图
看到一张redis的基础知识思维导图,比较清晰, 但是没有标明来源,希望知道的给个地址,我也好说明来源图大小有1M多.在博客上看比较模糊,可以先下载下来查看,或者在浏览器新标签中打开图片查看,就比较 ...
passat product list
s end
Python 几个常见函数
本文主要总结常见的函数知识点. 1.zip函数用来并行迭代,可以把两个序列并在一起,然后返回一个元组的列表 names = ['Ann','Jame','Anla'] ages = [11,12,1 ...
AForge调用摄像头拍照时设置分辨率
简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...
【bzoj 2159】Crash 的文明世界
Description Crash小朋友最近迷上了一款游戏——文明5(Civilization V).在这个游戏中,玩家可以建立和发展自己的国家,通过外交和别的国家交流,或是通过战争征服别的国家.现在 ...
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
【尚学堂·Hadoop学习】MapReduce案例1--天气
案例描述找出每个月气温最高的2天数据集 -- :: 34c -- :: 38c -- :: 36c -- :: 32c -- :: 37c -- :: 23c -- :: 41c -- :: 27 ...
iTOP-4418/6818开发板用户使用手册内容有哪些
更多内容分享,请继续期待 iTOP-6818开发板与4418开发板共兼容同一底板: 核心板:::::: 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm ...
清北学堂学习总结day2
今天是钟皓曦大佬讲课,先来膜一波 %%%%% •数论数论是这次培训的一个重点,那么什么是数论呢? 数论是研究整数性质的东西,所以理论上day2不会涉及小数QwQ (切入正题) •整除性: 设a, ...
#20175204 张湲祯 2018-2019-2《Java程序设计》第五周学习总结
20175204 张湲祯 2018-2019-2<Java程序设计>第五周学习总结教材学习内容总结 -第六章接口与实现要点: -接口: 1.使用关键字interface定义接口. 2.接 ...

html_之css

html_之css的更多相关文章

随机推荐

热门专题