前端笔记-css

css（穿着）

1.　第一种<head><style></style></head>中可以写css样式

　　css选择器　　定位到哪个标签的css

　　　　id选择器

<!DOCTYPE html>

ssng="en">

<head>

    <meta charset="UTF-8">

    <!--样式标签-->

    <title>css_id选择器</title>

    <style>

        /*id选择器*/

        /*#代指id*/

        #div1{background-color:red}

    </style>

</head>

<body>

    <div id="div1">nihao</div>

</body>

</html>

　　　　id组合选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--样式标签-->

    <title>css</title>

    <style>

        /*id组合选择器选择器*/

        /*id选择器扩展组合写法，注意格式逗号，和井号*/

        #w1,#w2{

            background-color: red;

        }

    </style>

</head>

<body>
　  <!--id中的元素在同一个html中只能出现一次，class可以出现多次-->

    <div id="w1">1</div>

    <div id="w2">2</div>

</body>

</html>

　　　　class选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--样式标签-->

    <title>css</title>

    <style>

        /*class选择器*/

        /*.代指class*/

        .c1{background-color:black}

    </style>

</head>

<body>

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

</body>

</html>

　　　　class组合选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--样式标签-->

    <title>css</title>

    <style>

        /*class组合选择器选择器*/

        /*class选择器扩展组合写法，注意格式逗号，和点*/

        .c1,.c2{

            background-color: red;

        }

　　　　,.c3{

            background-color: yellow;

        }

    </style>

</head>

<body>

    <!--class中的元素在同一个html中可以出现多次，而id只能出现一次-->

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

    <div class="c1 c2">2</div>

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

</body>

</html>

　　　　标签选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--样式标签-->

    <title>css</title>

    <style>

        /*标签选择器*/

        /*直接指定标签，其结果会引用到当前html中所有的元素，不过通常还是用定位比较准确的选择器比较好*/

        div{

            background-color: red;

        }

    </style>

</head>

<body>

    <div>nihao</div>

</body>

</html>

　　　　标签层级选择器　　在标签选择器中更深层的定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--样式标签-->

    <title>css</title>

    <style>

        /*标签层级选择器*/

        /*直接指定标签后加上空格表示层级再加上后续标签*/

        div span{

            background-color: red;

        }

        div div{

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div>

        <div>1</div>

        <span>2</span>

    </div>

</body>

</html>

　　　　属性选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--样式标签-->

    <title>css</title>

    <style>

        /*属性选择器选择器*/

        /*属性选择器写法，注意标签名和属性，只有符合标签名和属性值才能匹配*/

        div[name = "cc"]{

            background-color: red;

        }

        div[id = "aa"]{

            background-color: yellow;

        }

        p[class = "dd"]{

            background-color: pink;

        }
　　　　

    </style>

</head>

　　　　属性选择器扩展

伪类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*通过a标签属性选择器测试伪类,注意a标签内置了伪类选择器,通过body继承修改不了a标签的样式,要单独设置a标签的伪类才能修改a标签的几种样式,冒号表示伪类后面跟属性名{css样式}*/

        /*link没有访问过状态*/

        a:link{color: red}

        /*hover鼠标悬浮状态*/

        a:hover{color: pink}

        /*active点击(鼠标按住到松开)状态*/

        a:active{color:green}

        /*visited点击后的状态*/

        a:visited{color: black;}

    </style>

</head>

<body>

<a href="http://www.baidu.com">百度</a>

</body>

伪元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*伪元素选择器*/

        p::first-letter{

            color: red;

        }

        /*一般一个冒号是伪类,两个冒号是伪元素,现在一个冒号也可以使用了*/

        div:first-letter{

            color: blue;

        }

    </style>

</head>

<body>

<p>helloworld</p>

<div>你好世界 !!</div>

</body>

</html>

　　　　常用伪元素::after,::before

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪类after,before</title>

    <style>

        /*伪类after可以动态的加入css样式,固定格式是::after或者::before,content表示输入文字*/

        /*::after表示样式加在后面*/

        #after::after{content: "**after测试成功**"}

        /*::before表示样式加在前面*/

        .before::before{content: "**before测试成功**"}

    </style>

</head>

<body>

<div id="after">测试after</div>

<div class="before">测试before</div>

</body>

</html>

　　主流清除浮动的用法:

　　conntent必须要加不为空的字符,display:block表示把此标签变成块级标签,clear:both左右两侧都不浮动,visibivity:hidden表示隐藏标签的内容,但是标签块还是存在,如果想要隐藏标签块加上,height:0就行了

2.　　指定标签添加css样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

</head>

<body>

    <!--第二种添加css样式，在指定标签中加入style属性-->

    <div name="cc" style="background-color: red">1</div>

</body>

</html>

3.　　<head></head>中引入css样式表

/*路径为当前目录的css.css文件*/

.c1{

    background-color: black;

}

.c2{

    background-color: pink;

}

.c3{

    background-color: red;

}

.c4{

    background-color: yellow;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <!--link一般两种用途，一个是做网站图标显示，还有一种是引用css样式-->

　　<link rel="shortcut icon" href="H[K_981P569OK@_FHL5V3LE.png">

    <meta charset="UTF-8">

    <title>css</title>

    <!--第三种添加css样式方法，在引用css样式表，css.css文件名-->

    <link rel="stylesheet" href="css.css">

</head>

<body>

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

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

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

    <!--也可以直接在指定属性中添加样式表-->

    <div class="c4" rel="stylesheet" href="css.css">4</div>

</body>

</html>

选择器嵌套规则

css优先级测试

/*css样式表*/
.c1{

    background-color: black;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css</title>

    <!--引用css样式表-->

    <link rel="stylesheet" href="css.css" >

    <!--通过head头中style加入样式颜色-->

    <style>

        .c1{

            background-color: red;

        }

    </style>

</head>

<body>

    <!--直接引入样式颜色-->

    <div class="c1" style="background-color: yellow">1</div>

</body>

</html>

　　通过查看页面以此顺序是黄红黑，再把右侧头部样式表和style相互调换，发现颜色顺序是黄黑红

　　最终测试发现，css样式调用顺序是由内而外，由近至远

css样色代码

表达方式1:

　　css颜色是通过#号后面加一个16进制数展现的

表达方式2:

　　css颜色可以用rgb(0~255,0~255,0~255)表示rgb就是红绿蓝三原色,通过不同的值可以调出所有的颜色

表达方式3:

　　英文单词 color:red

http://www.w3school.com.cn/tags/html_ref_colornames.asp

css样式属性

vertical-align: middle;	设置垂直居中,vertical-align表示垂直对齐方式,一般用于图片
<a href="http://www.baidu.com" style="text-decoration: None">hhh</a>	text-decoration: None表示去除所有修饰,通常用于删除a标签下横线, underline设置下划线; text-decoration:line-through表示设置删除线,其和<del></del>标签是等价关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--font-weight最粗字体--> <div style="height: 100px;width: 100px;background-color: yellow;font-size: 50px;font-weight: bolder">rainbol </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> #c1{ width: 50px; height: 50px; /外边框 1像素红色实线/ border: 1px red solid; /水平居中/ text-align: center; /垂直居中/ line-height: 50px; } </style> <body> <div id="c1">rainbol</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> .c1{ width: 50px; height: 50px; background-color: red; /浮动，页面右侧/ float: right; } </style> <body> <div class="c1"></div> <div class="c1" style="background-color: yellow"></div> <div class="c1" style="background-color: green"></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div style="display: inline ">块转行内</div> <span style="display: block">行内转块</span> </body> </html>	display属性可以使行内标签，块级标签相互转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--行内标签不能应用高宽，内内边距样式，行内标签自己有多大就占多大，如果行内标签想转成块级标签，并且不想占满一整行怎么办--> <!--<span style="width: 100px;height: 100px">nihao</span>--> <!--即使块又是行内,行内块标签,inline-block--> <span style="display: inline-block;width: 100px;height: 100px">123</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-height测试</title> <style> /把默认设置的浏览器宽度干掉/ {margin: 0} #line-height{height: 100px;width: auto;background-color: pink; /上下调节样式高度,100px,表示上下各增加高度50px/ line-height: 100px; /每个字之间间隙增加5px/ letter-spacing: 5px; /空格间间隙增加10px/ word-spacing: 10px; /单词首字母大写*/ text-transform: capitalize; } </style> <body> <div id='line-height' >hello, 刷刷刷 ,world!</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--之后通过js对display进行操作可以点击操作对图片进行展示和隐藏--> <span style="display:none;width: 100px;height: 100px">隐藏标签</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div style="height: 100px;width: 100%;border:1px red solid"> <div style="margin-top: 22px;height: 48px;width: 100%;background-color: green"></div> <div style="padding-top: 22px;height: 48px;width: 100%;background-color: green"></div> </div> </body> </html>	margin:内边距　　padding外边距　　border:边框 margin-top内边距：距离自己本身与上边框的距离像素 padding-top外边距：改变自身大小
/盒子模型padding/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #boxes{ /当只有一个值时表示padding的上下左右都为10px/ /padding: 10px;/ /当设置了两个值表示padding的上下为10px,左右为20px/ /padding: 10px 20px;/ /当设置了三个值表示padding的上边距为10px,左右边距为20px,下边距为30px/ /padding: 10px 20px 30px;/ /当设置了4个值表示padding的依次顺序顺时针方向,上左下右/ padding: 10px 20px 30px 40px ; 　　　　　　 /掌握了这些设置单个属性可以通过padding-top等api设置/ } </style> </head> <body> <div id="boxes" style="background: red;height: 100px;width: 100px;">300</div> </body> </html>
<!--margin距离边框0 postition=fixed绝对定位--> <div style="margin: 0;position: fixed;top: 0;right: 0;left: 0;height: 20px;background-color: green"> </div>	指定目标位置绝对，无视滚动条在页面定位，top，right等元素对其位置变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body style="margin: 0" > <!--相对定位postiton,根据relative外层div，然后根据absolute内部div进行构筑--> <div style="position: relative;width: 500px;height: 500px;border: 1px black solid"> <div style="position: absolute;height: 100px;width: 100px;background-color: green"> </div> <div style="right: 0;position: absolute;height: 100px;width: 100px;background-color: pink"> </div> <div style="left: 0;bottom: 0;position: absolute;height: 100px;width: 100px;background-color: red"> </div> <div style="right: 0;bottom: 0;position: absolute;height: 100px;width: 100px;background-color: black"> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body style="margin: 0" > <div style="position: relative;width: 500px;height: 500px;border: 1px black solid"> <div style="z-index: 10;position: absolute;height: 100px;width: 100px;> <!--z-index分层--> </div> <div style="z-index: 11;position: absolute;height: 100px;width: 100px;background-color: pink"> </div> </div> </body> </html>	两张图片重叠在一起，z-index分层属性，数值是1-999任意一个数，区分在于哪个数值大，就选择哪个层，后面可以通过js控制图片显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div> <input type="button" style="cursor:pointer" value="登录" > </div> </body> </html>	当鼠标悬浮到按钮出现小手样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--overflow滚动条--> <!--hidden 当图片或者内容大于外层时自动截取左上部分--> <!--auto 根据内容自动增加滚动条如果图片小于外边框，滚动条会消失--> <!--scroll 无论大小都增加滚动条--> <div style="border: black 1px solid;width: 100px;height: 100px;overflow: scorll" > <img src="H[K_981P569OK@_FHL5V3LE.png"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <!--background-size:50px 50px改变背景图的大小，等比例缩放,或者放大--> <!--background-image背景图，如果图片小于外层会发生堆叠--> <!--background-repeat: no-repeat背景图不堆叠--> <!--x-repeat横向堆叠--> <!--y-repeat纵向堆叠--> <div style="border: black 1px solid;width: 600px; height: 500px;background-image: url('H[K_981P569OK@_FHL5V3LE.png')"> </div> </body> </html>	作用：用小图无限堆叠，加快网页渲染速度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <body> <div style="background-position: 1px 1px;background-repeat: no-repeat;border: black 1px solid;width: 600px; height: 500px;background-image: url('H[K_981P569OK@_FHL5V3LE.png')"> </div> </body> </html>	抠图：以百度为例所有的图片集合在一张上，通过外层格式，定位到所需要的图片位置，展现所需要的图片保证外部div足够小的情况下，通过改变background-postiton像素大小来找到所需图的位置，提升页面缓存效率，和整体页面渲染速度
clear的用法　　clear一般放在样式标签最下边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>RainBol2</title> <style> img{ float:left; clear: right; /在左侧不允许浮动元素/ clear:both; /在左右侧都不允许浮动元素,也叫清除浮动/ clear:left; /在左侧不允许浮动元素/ clear:none; /默认值,允许浮动元素出现在两侧/ clear:inherit; /规定应该从父元素继承 clear 属性的值/ } </style> </head> <body> <img src="1.png" alt=""> <img src="2.png" alt=""> </body> </html>
高级选择器补充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /后代选择器/ #outer1 #outer2{/选择器后面跟上空格再接选择器或者其他标签这种表示outer1下的outer2标签及其子孙标签被变成green/ background-color: green; } #outer1 a div span{ /注意一定紧挨着的,如果中间有不存在的标签就不会生效/ background-color: red; } </style> </head> <body> <div id="outer1">111 <div id="outer2">222 <div id="outer3">333 <span id="inner"> RainBol </span> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /子代选择器也是挨着寻找,如果没有找到就不生效/ #outer1>span{ background-color: yellow; } #outer1>div{ /标签选择器可以应用到其下所有div标签/ background-color: red; } #outer1>#outer2>#outer3{/选择器可以应用到其下所有标签/ background-color: #0d8ddb; } </style> </head> <body> <div id="outer1">111 <div id="outer2">222 <div id="outer3">333 <span id="inner"> RainBol </span> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> 　　 <meta charset="UTF-8"> <title>Title</title> <style> #demo1{background-color: red} #demo2{background-color: yellow} #demo3{background-color: green} .demo{font-size: 50px} #demo1.demo{ color: blue; } /上面交集的内容类似于下面代码,交集的样式可以同时作用在其两者身上/ /#demo1{background-color: red;color: blue;}/ /#demo2{background-color: yellow}/ /#demo3{background-color: green}/ /.demo{font-size: 50px;color: blue;}/ /交集与并集的区别/ /1、交集选择器是and；/ /2、并集选择器是or；/ /3、交集选择器只能交2个，其中第1个是标记，第2个是类选择器或者ID选择器，之间不能有空格，形如：h2.special；/ /4、并集选择器可多个，中间用“,”隔开；/ </style> </head> <body> <div id="demo1" class="demo">Rainbol1</div> <div id="demo2" class="demo">Rainbol2</div> <div id="demo3" class="demo">Rainbol3</div> </body> </html>
版权声明：本文原创发表于博客园，作者为 RainBol本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。

前端笔记-css的更多相关文章

前端笔记--css样式笔记
一.浮动定位布局 1.浮动布局 left 元素向左浮动 right 元素向右浮动例如:设置2个按钮,要使得按钮在同一行位置摆放,可以使用浮动,令按钮浮动到右边.注意,先设置float的按钮,例如: ...
2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...
写给后端的前端笔记：浮动（float）布局
写给后端的前端笔记:浮动(float)布局这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
写给后端的前端笔记：定位（position）
写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别我们所说的定位position主要有三类:固定定位 ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
前端笔记-html
前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <> ...

随机推荐

【miscellaneous】理解Gstreamer架构
本文给出了Gstreamer的总体设计.通过阅读本文可以了解Gstreamer的内部工作原理.本文编译自gstreamer源码中的文档,原文在源码中的位置是/gstreamer/docs/design ...
eNSP——配置全局地址池的DHCP
原理: 拓扑图: 实验编址: 1.基本配置 2.配置全局地址池的DHCP Server 在R1上开启DHCP功能,使用ip pool命令创建一个全局地址池,名字自己定. 在全局地址池配置网段.掩码.租 ...
cent8安装postgres
postgres是一款免费.开源的对象型关系数据库,其在cent8的安装方式与cent7的不太一样,特此记录. 步骤: 1 安装postgres server dnf install postgres ...
学习笔记：yaml语言教程
目录 1.YAML基本概念 1.1 简介 1.2 基本语法 1.3 支持的数据结构: 1.4 注意点 2.数据结构 2.1 字典 2.2 数组 2.3 纯量 2.4 强制类型转换,双! 2.5 字符串 ...
关于AES加密，以及各种分组加密
http://blog.csdn.net/searchsun/article/details/2516191
[转帖]Linux系统下x86和ARM的区别有哪些？
Linux系统下x86和ARM的区别有哪些? https://www.cnblogs.com/alantu2018/p/9209143.html 其实界限越来越小了.. 问题: 最近在用三星的一款i ...
长乐培训Day1
T1 魔法照片题目 [题目描述] 如果你看过<哈利·波特>,你就会知道魔法世界里的照片是很神奇的.也许是因为小魔法师佳佳长的太帅,很多人都找他要那种神奇的魔法照片, 而且还都要佳佳和他的 ...
MyBatis_02 框架
今日内容动态SQL语句 Xml方式注解方式 MyBatis的缓存 MyBatis的关联查询 MyBatis逆向工程动态SQL语句动态SQL是什么就是相对与固定SQL.就是通过传入的参数不一样 ...
一个炒鸡好用的pdf阅读器
下载地址:https://www.sumatrapdfreader.org/free-pdf-reader.html 一个关系很好的同事推荐的pdf阅读器之前用的感觉不错每次都记不住自己收 ...
轻松搭建CAS 5.x系列(4)-Java客户端程序接入CAS单点登录，Hello World版
概述说明按照本系列的前3篇文章描述的步骤,我们已经搭建好cas sso server.那应用程序怎么接入到实现sso呢? (如果您还没有搭建cas server,可以到<轻松搭建CAS 5.x ...

前端笔记-css

前端笔记-css的更多相关文章

随机推荐

热门专题