day48

通过调试窗口还可以玩一个神奇的东西

document.body.contentEditable=true

css样式

高度宽度

width宽度

height高度

	块级标签能设置高度宽度,内联标签不能设置高度宽度,内敛标签的高度宽度由标签内部的内容来决定.

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 100px;

            width: 200px;

            background-color: purple;

        }

        span{

            height: 100px;

            width: 200px;

            background-color: yellow;

        }

    </style>

</head>

<body>

<div>div1</div>

<span>span1</span>

</body>

</html>

字体属性

字体

font-family:'宋体','楷体'...

font-family: '楷体','黑体';  /* 字体,从左往右找浏览器能够支持的字体 */

字体大小

font-size: 10px;           /* 设置字体大小,默认字体大小是16px */

字重

font-weight:bold;加粗

字体颜色

/*color:red;*/

/*color: #668B8B;  */

/*color: rgb(255, 170, 205);*/

字重设置的值

　　　　　　font-weight用来设置字体的字重（粗细）。

值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值

文字属性

文字对齐(水平方向对齐)

text-align: center;

text-align: right;

text-align: left;

text-align 属性规定元素中的文本的水平对齐方式。（letter-spacing）

值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐

垂直对齐

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            border: 1px solid red;

            text-align: center;

            line-height:200px;

        }

    </style>

</head>

<body>

<div>

    <span>

        xxxxx

    </span>

</div>

</body>

</html>

文字装饰

text-decoration: none;

text-decoration: overline;

<a href="">百度</a>

示例

a{

	text-decoration: none;

}

text-decoration 属性用来给文字添加特殊效果。

主要作用是给超文本标签去下划线的

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

首行缩进

p{

	text-indent: 32px;

}

示例

<p>

    唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.

</p>

背景属性

/*background-color: blue;*/ /* 设置背景颜色 */

background-image: url("meinv.jpg");  /* 背景图片,url属性值为图片路径 */

background-repeat: no-repeat; /* 图片是否平铺,默认是平铺的,占满整个标签 */

/*background-position: right bottom; !* 图片位置 *!*/

/*background-position: 100px 50px; !* 图片位置,100px是距离左边的距离,50px是距离上面的距离 *!*/

简写方式

background: yellow url("meinv.jpg") no-repeat 100px 50px;

背景颜色 背景图片路径 是否平铺 图片位置

边框属性

/*border-style: dotted;*/  样式

/*border-color: red;*/   颜色

/*border-width: 10px;*/  宽度

简写形式:

	/*border: 10px solid yellow;*/

四个边框可以单独设置:

	border-left:10px solid yellow;

	border-right:10px dashed red;

设置圆角

	border-radius: 5%;  /* 设置圆角 */

示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            /*border-style: dotted;*/

            /*border-color: red;*/

            /*border-width: 10px;*/

            /*border: 10px solid yellow;*/

            border-left:10px solid yellow ;

            border-right:10px dashed red ;

            border-radius: 5%;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

边框样式的值

值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

display

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。 
 示例

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 200px;

            width: 200px;

            border: 1px solid red;

            /*display: inline;*/

            /*display: inline-block;*/

            display: none; /* 隐藏标签 */

        }

        span{

            height: 200px;

            width: 200px;

            border: 1px solid green;

            /*display: block;*/

        }

        p{

            height: 200px;

            width: 200px;

            border: 1px solid yellow;

            display: inline;

        }

    </style>

</head>

<body>

<div>xxxxxxx</div>

<span>span1111</span>

</body>

</html>

隐藏标签

/*display: none;*/   /* 隐藏标签,不占原来的位置 */

visibility: hidden;  /* 原来的位置还占着 */

盒子模型

content:内容  width和height 是内容的高度宽度

padding:内边距 内容和边框之间的距离

border:边框

margin:外边距 标签之间的距离,如果两个标签都设置了margin,选最大的值,作为双方之间的距离

占用空间大小:content+padding+border

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 100px;

            height: 100px;

            border: 10px solid red;

            /*padding: 20px 20px; !* 内边距,内容和边框之间的距离 *!*/

            padding: 8px 2px 3px 6px; /* 上右下左 */

            margin: 20px 10px;

        }

        .c2{

            width: 100px;

            height: 100px;

            border: 10px solid green;

            margin: 10px 2px 6px 8px; /* 外边距,与其他标签的距离,如果旁边没有标签,按照父级标签的位置进行移动 */

        }

        .c3{

            width: 100px;

            height: 100px;

            border: 1px solid blue;

        }

    </style>

</head>

<body>

<div class="c1">

    div1

</div>

<div class="c2">

    div2

</div>

<div class="c3">

    div3

</div>

</body>

</html>

四个方向单独设置padding

padding-left: 10px;

padding-top: 8px;

padding-right: 5px;

padding-bottom: 5px;

四个方向单独设置margin

margin-top: 10px;

margin-left: 100px;

margin-bottom: 50px;

margin-right: 200px;

float浮动

一般用来进行页面布局

浮动会脱离正常文档流

会造成父级标签塌陷问题

清除浮动(解决塌陷问题)

clear: both; /* clear清除浮动 */ left\right

方式1:

	1.父级标签设置高度

	2.通过伪元素选择器来进行清楚浮动:写法如下

		.clearfix:after{

            content:'';

            display: block;

            clear: both;

        }

     示例:

     	<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 100px;

            height: 100px;

            background-color: red;

            float: left;

        }

        .c2{

            width: 100px;

            height: 100px;

            background-color: green;

            float: right;

        }

        .c3{

            /*width: 100px;*/

            height: 100px;

            background-color: pink;

            /*clear: both; !* clear清除浮动 *!*/

        }

        .clearfix:after{

            content:'';

            display: block;

            clear: both;

        }

        /* 浮动,会造成父级标签塌陷问题 */

        /* 解决父级标签塌陷问题方式1 */

        /*.cc{*/

        /*    height: 100px;*/

        /*}*/

    </style>

</head>

<body>

<!--ajsdfja;sdjfo;asjdfo-->

<div class="cc clearfix">

    <div class="c1">div1</div>

    <div class="c2">div2</div>

</div>

<div class="c3">div3</div>

</body>

</html>

clear

　　　　clear属性规定元素的哪一侧不允许其他浮动元素。

clear清除浮动

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

overflow溢出

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 200px;

            width: 200px;

            border: 1px solid red;

            overflow: scroll;

        }

    </style>

</head>

<body>

<div>

    菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.菩提本无树,明镜亦非台.本来无一物,何处惹尘埃.

</div>

</body>

</html>

结果：

day48——css样式的更多相关文章

  1. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  2. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  4. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  5. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  6. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  7. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

  8. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  9. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

随机推荐

  1. 使用flow来规范javascript的变量类型

    众所周知, js是弱类型的语言,由此有了很多的优点,也出现了大量由此导致的错误,难以定位.当然有类似于ts之类的语法糖来解决此问题,ts因为是从c#演变而来的,所以入门有一定的门槛,所以我们来一下fl ...

  2. Traefik 2.0 tcp 路由试用

    对于tcp 的路由是基于sni (需要tls)但是可以通过统配(*) 解决不试用tls的,当然也可以让Traefik 自动生成tls 证书 以下是测试http 以及mysql 的tcp 路由配置(de ...

  3. 一些开源的dashboard 解决方案

    简单收集了以下开源dashboard 的项目,记录下 plotly-dash 基于python 的dash 开发工具,很不错 项目地址 https://github.com/plotly/dash k ...

  4. 计蒜客 41387.XKC's basketball team-线段树(区间查找大于等于x的最靠右的位置) (The Preliminary Contest for ICPC Asia Xuzhou 2019 E.) 2019年徐州网络赛

    XKC's basketball team XKC , the captain of the basketball team , is directing a train of nn team mem ...

  5. WAMP完整配置教程(启用php extensions、修改端口、允许外网访问、wamp绑定域名)。

    作为一名php爱好者,很希望自己的写的代码能够快速的在浏览器页面展现出来,wamp是一款集成很完善.很方便的软件,我刚开始研究的时候,会因为对于wamp的不熟悉,导致修改一点点配置就会在百度查好久,这 ...

  6. c语言用指针定义一个类型进行输入输出

    1 整型数组 // #include "stdafx.h" #include "stdlib.h" int _tmain(int argc, _TCHAR* a ...

  7. 使用gdb调试段错误

    [https://blog.csdn.net/xj9120/article/details/91380074] 1.bt 2.frame number 3.一般是内存问题 4.kill

  8. 范仁义html+css课程---9、video、audio、canvas和svg元素略讲

    范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...

  9. tomcat中文乱码

    1. https://blog.csdn.net/qq_35038153/article/details/78430359 2. 1.修改apache-tomcat-9.0.14-windows-x6 ...

  10. SNPsnap | 筛选最佳匹配的SNP | 富集分析 | CP loci

    一个矛盾: GWAS得到的SNP做富集分析的话,通常都会有强的偏向性. co-localization of GWAS signals to gene-dense and high linkage d ...