CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。
样式通常存储在样式表中,⽬的也是为了解决内容与表现分离的问题
外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率
多个样式定义可层叠为⼀,后者可以覆盖前者样式
⼀般⽽⾔,所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中,其中数字 4 拥有最⾼的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于 标签内部)
4.内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最⾼的优先权,这意味着它将优先于以下的样式声明:
<head> åå标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
格式: 选择器{属性:值;属性:值;属性:值;…}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 样式修饰:h3标题和li列表 */
h3{
color:red;font-size: 30px;}
li{
color:green;font-size: 15px; line-height: 30px;}
</style>
</head>
<body>
<!-- CSS样式基础语法实例 -->
<h3>什么是CSS?</h3>
<ul>
<li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
<li>样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
<li>样式通常存储在样式表中,目的也是为了解决内容与表现分离的问题</li>
<li>外部样式表(CSS文件)可以极大提高工作效率</li>
<li>多个样式定义可层叠为一,后者可以覆盖前者样式</li>
</ul>
</body>
</html>
格式: /* … */
插⼊样式表的⽅法有三种:
1)(推荐)就是在head标签中使⽤标签导⼊⼀个css⽂件,在作⽤于本⻚⾯,实现css样式设置
<link href="⽂件名.css" type="text/css" rel="stylesheet"/>
2) 还可以使⽤import在style标签中导⼊css⽂件。
<style type="text/css">
@import "style.css";
</style>
特点:作⽤于整个⽹站
优先级:当样式冲突时,就是采⽤就近原则,是值css属性离被修饰的内容最近的为主。
若没有样式冲突则采⽤叠加效果
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式表 -->
<link rel="stylesheet" href="./css/my.css">
</head>
<body>
<h1>CSS样式的使用方式</h1>
<h4>插入样式表的方法有三种:</h4>
<ul>
<li>外部样式表(External style sheet)</li>
<li>内部样式表(Internal style sheet)</li>
<li>内联样式(Inline style)</li>
</ul>
</body>
</html>
就是在head标签中使⽤ 标签来设置css样式
<style type="text/css">
....css样式代码
</style>
<!-- 特点:作⽤于当前整个⻚⾯ -->
就是在HTML的标签中使⽤style属性来设置css样式
格式: <html标签 style=“属性:值;属性:值;…”>被修饰的内容</html标签>
<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>
<!-- 特点:仅作⽤于本标签。-->
选择符的优先级:从⼤到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
也可以通过下列方式修改优先级规则:
1) html选择符(标签选择器)
就是把html标签作为选择符使⽤(用HTML的标签作为选择器的名字)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*1,HTML选择器*/
h3{
color: aqua;}
</style>
</head>
<body>
<h1>CSS常用选择器(选择符)</h1>
<h3>什么是CSS?</h3>
<ul>
<li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
<li>样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
<li>样式通常存储在样式表中,目的也是为了解决内容与表现分离的问题</li>
<li>外部样式表(CSS文件)可以极大提高工作效率</li>
<li>多个样式定义可层叠为一,后者可以覆盖前者样式</li>
</ul>
</body>
</html>
2)class类选择符 (使⽤点.将⾃定义名(类名)来定义的选择符)
定义: .
类名{样式....} 匿名类
其他选择符名.类名{样式....}
使⽤:
<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采⽤此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采⽤此样式*/
注意:
类选择符可以在⽹⻚中重复使⽤
3) Id选择符
定义: #id名{样式…}
使⽤:<html标签 id=“id名”>…</html标签>
注意:id选择符只在⽹⻚中使⽤⼀次(一般情况下,一个id只出现在一处地方)
4) 关联选择符(包含选择符)
格式: 选择符1 选择符2 选择符3 …{样式…}
table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/
(中间空格隔开)
等价于
5)组合选择符(选择符组)
格式: 选择符1,选择符2,选择符3 …{样式…}
h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式
6) 伪类选(伪元素)择符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*1.html选择器*/
h3{
color:red;}
/*2.类选择器*/
/*将网页中class属性值为cc的标签采用此样式*/
.cc{
color:hotpink}
/*class属性值为cc的h1标题标签采用此样式*/
h1.cc{
color:green;}
.dd{
background-color:#ddd;}
/*3. id选择器*/
/*id属性值为hid的标签采用此样式*/
#hid{
font-size:40px;}
/*测试选择器的优先级*/
#sid{
color:greenyellow}
.sc{
color:green;background-color:#ddd;}
span{
color:red !important;font-size:22px;}
/*4.关联选择器(包含选择器)*/
/*ol标签下的li标签采用此样式*/
ol li{
color:lightseagreen}
/*5.选择器组*/
h1,h2,h3,h4,h5,h6{
background-color: linen;font-family:Arial, Helvetica, sans-serif;}
/*6. 伪类选择器*/
a:link {
color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {
color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {
color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {
color: #0000FF; text-decoration: underline} /* 激活链接 */
</style>
</head>
<body>
<h1 class="cc">CSS的常用选择器(选择符)</h1>
<h3 id="hid">什么是CSS?</h3>
<ul>
<li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
<li class="cc">样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
<li>样式通常存储在样式表中,目的也是为了解决内容与表现分离的问题</li>
<li class="cc dd">外部样式表(CSS文件)可以极大提高工作效率</li>
<li class="dd">多个样式定义可层叠为一,后者可以覆盖前者样式</li>
</ul>
<span class="sc" id="sid">CSS的常用选择器</span>
<h4>插入样式表的方法有三种:</h4>
<ol>
<li>外部样式表(External style sheet)</li>
<li>内部样式表(Internal style sheet)</li>
<li>内联样式(Inline style)</li>
</ol>
<ul>
<li><a href="a.html?id=1111">CSS语法实例</a></li>
<li><a href="b.html">CSS样式使用方式</a></li>
</ul>
</body>
</html>
div>p 选择所有作为div元素的⼦元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后⾯的所有兄弟元素p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择符实例</title>
<style>
/*ul中的所有子li标签都采用此样式*/
/*ul li{color:red;}*/
/*ul中的直接子li标签采用此样式(注意ol中的li不是)*/
ul > li{
color:blue;}
/*紧邻div的一个p兄弟标签采用此样式*/
/*div+p{color:red;}*/
/*div后面所有兄弟p标签都采用此样式*/
div~p{
color:red;}
</style>
</head>
<body>
<h1>关系选择器</h1>
<ul>
<li>列表一级子项目1</li>
<li>列表一级子项目2</li>
<ol>
<li>列表二级子项目1</li>
<li>列表二级子项目2</li>
</ol>
</ul>
<div>aaaaaa</div>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
<div>bbbbbb</div>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
</body>
</html>
空格分隔
分隔
+分隔
~分隔
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表,其中⼀个等于value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS中的属性选择器</title>
<style>
/*含有title属性的li标签采用此样式*/
/* li[title]{color:red;}*/
/*含有title属性值为bb的li标签采用此样式*/
/*li[title="bb"]{color:red;}*/
/*含有class属性值(以空格分隔开)中有aa的li标签采用此样式*/
/* li[class~="aa"]{color:red;}*/
/*含有class属性值(以-分隔开)以aa开头的li标签采用此样式*/
/*li[class|="aa"]{color:red;}*/
/*class属性值是以b子串开头的*/
/*li[class^="b"]{background-color:#ddd;}*/
/*class属性值是以dd结尾的li标签*/
/*li[class$="dd"]{background-color:#ddd;}*/
/*class属性值中含有bb的li标签*/
/*li[class*="bb"]{background-color:#ddd;}*/
</style>
</head>
<body>
<h1>CSS中的属性选择器</h1>
<ul>
<li class="aa-bb" title="html">1.html选择器</li>
<li class="bb-cc">2.class类选择器</li>
<li class="cc dd" title="id">3.id选择器</li>
<li class="bb-dd">4.关联选择器</li>
<li class="aa bb" title="bb">5.组合选择器</li>
<li class="bb aa">6.伪类选择器</li>
</ul>
</body>
</html>
attribute
attribute=value
attribute~=value
attribute|=value
attibute^=value
attribute$=value
attribute*=value
星号为常用
::first-letter设置对象内的第⼀个字符的样式。
::first-line设置对象内的第⼀⾏的样式。
:before设置在对象前(依据对象树的逻辑结构)发⽣的内容。
:after设置在对象后(依据对象树的逻辑结构)发⽣的内容。
:lang(language)匹配使⽤特殊语⾔的E元素。
:element1~element2:
:first-of-type匹配同类型中的第⼀个同级兄弟元素
:last-of-type匹配同类型中的最后⼀个同级兄弟元素
:only-of-type匹配同类型中的唯⼀的⼀个同级兄弟元素
:only-child匹配⽗元素仅有的⼀个⼦元素
*:nth-child(n)匹配⽗元素的第n个⼦元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
*:first-child 匹配⽗元素的第⼀个⼦元素
* :last-child 匹配⽗元素的最后⼀个⼦元素
:root匹配元素在⽂档的根元素。在HTML中,根元素永远是HTML
:empty匹配没有任何⼦元素(包括text节点)的元素
星号为常用
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被⽤户激活(在⿏标点击与释放之间发⽣的事件)时的样式
*:hover 设置元素在其⿏标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配⽤户界⾯上处于可⽤状态的元素
:disabled 匹配⽤户界⾯上处于禁⽤状态的元素
:checked 匹配⽤户界⾯上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection 设置对象被选择时的样式
E:not(s) : {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}
color颜色属性值
星号为常用
font: 简写
*font-size: 字体⼤⼩:20px,60%基于⽗对象的百分⽐取值
*font-family: 字体:宋体,Arial
font-style: normal正常;italic斜体; oblique倾斜的字体
*font-weight: 字体加粗 :bold
font-variant: small-caps ⼩型的⼤写字⺟字体
font-stretch: [了解]⽂字的拉伸是相对于浏览器显示的字体的正常宽度(⼤部分浏览器不⽀持)。
text-indent: ⾸⾏缩进:text-indent:2em;
text-overflow: ⽂本的溢出是否使⽤省略标记(...)。clip|ellipsis(显示省略标记)
*text-align: ⽂本的位置:left center right
text-transform:对象中的⽂本的⼤⼩写:capitalize(⾸字⺟)|uppercase⼤写|lowercase⼩写
*text-decoration: 字体画线:none⽆、underline下画线,line-through贯穿线
text-decoration-line:[了解]⽂本装饰线条的位置(浏览器不兼容)
*text-shadow: ⽂本的⽂字是否有阴影及模糊效果
vertical-align: ⽂本的垂直对⻬⽅式
direction:⽂字流⽅向。ltr | rtl
white-space:nowrap; /* 强制在同⼀⾏内显示所有⽂本*/
*letter-spacing: ⽂字或字⺟的间距
word-spacing:单词间距
*line-height:⾏⾼
*color: 字体颜⾊
background:简写
*background-color: 背景颜⾊
*background-image: 背景图⽚
*background-repeat:是否重复,如何重复?(默认repeat横竖平铺,repeat-x横铺,repeat-y竖铺)
*background-position:定位(top,center,bottom,right)
background-attachment: 是否固定背景,
scroll:默认值。背景图像是随对象内容滚动
fixed:背景图像固定
css3的属性:
*background-size: 背景⼤⼩,如 background-size:100px 140px;
多层背景:
background:url(test1.jpg) no-repeat scroll 10px 20px,
url(test2.jpg) no-repeat scroll 50px 60px,
url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;
实例代码如下,images中的图片可以自行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 背景图片固定 不随页面滚动
body{
background-image: url(./images/Meinv083.jpg);
background-attachment: fixed;
}
*/
div{
width:400px;
height:300px;
border:1px solid #ddd;
margin:10px;
float:left;
}
div.c1{
/*
background-color:cadetblue;
background-image: url("./images/1.gif");
background-repeat: no-repeat;
background-position: bottom right;
*/
/*等价于上面简写:背景图片1.gif,上下左右都居中,不平铺,背景颜色*/
background: url(./images/1.gif) center center no-repeat cadetblue;
}
div.c2{
background-image:url(./images/Meinv083.jpg);
background-repeat: no-repeat;
background-position: -100px -320px;
}
div.c3{
/*效果同上(简写)*/
background:url(./images/Meinv083.jpg) -100px -320px no-repeat;
}
div.c4{
文章浏览阅读291次。ORM: Object Relational Mapping 关系对象映射Entity Framework:微软官方提供的ORM工具,将数据存储从域对象自动映射到关系型数据库的工具EF5由两部分组成,EF api和.net framework 4.0/4.5,而EF6是独立的EntityFramework.dll,不依赖.net Framework。使用NuGet即可安装EF。 E..._entity framwork
文章浏览阅读1k次。DManager Plus还内置了有关NTFS权限的报表。服务器中的共享、文件夹的权限、可访问文件夹的账户以及不可继承文件夹等方面的报表。这些报表让您可立即全面地了解访问控制信息,所以对管理员很有用。..._ad添加本地管理员权限
文章浏览阅读7.3k次,点赞13次,收藏175次。提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录CTF基础知识一、CTF简介二、CTF赛事介绍三、CTF竞赛模式1.解题模式(Jeopardy)2.攻防模式(Attack-Defense)3.混合模式(Mix)四、CTF竞赛内容国内外著名赛事1、国际知名CTF赛事2、国内知名CTF赛事五、如何学习CTF1、分析赛题2、常规操作3、入门知识推荐书籍CTF基础知识一、CTF简介CTF(Capture The Flag)夺旗比赛,在网络安全领域中指的是网络安全技术人员之间进行._ctf web
文章浏览阅读725次。Introduction to Udacity Self-Driving Car SimulatorUdacity recently made its self-driving car simulator source code available on their GitHub which was originally built to teach their Self-Drivin..._udacity self driving car sim ros
文章浏览阅读6k次。函数定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可函数特性:def my_sum(x,y): #定义函数名res = x+yreturn res #返回函数执行结果c = my_sum(4,5) #结果赋值给c变量print(c)减少重复代码使程序变的可扩展使程序变得易维护函数参数形参即变量名就是函数定义阶段的参数,实参即变量值就是函数调用阶..._python res
文章浏览阅读607次。动作标签实例之后补齐基础知识scope属性 该属性指定了所创建Bean实例的存取范围,省略该属性时的值为page.标识被执行时,首先会在scope属性指定的范围来查找指定的Bean实例,如果该实例已经存在,则引用这个Bean,否则重新创建,并将其存储在scope属性指定的范围内。 scope属性可选值如下page:(当前页面范围) 制定了所创建的Bean实例只能够在当前的JSP文件中使用,包括在通...
文章浏览阅读1.6k次。在二维开发中,openlayers4 入门开发系列结合 echarts4 实现散点图,下图是GIS之家的效果图,那么在三维中,则可借助Entity来变相构造下图的效果。思路:构造实体ellipse,造一个用作实心中心区域的表征位置,再造两个圆,控制他们的半径动态变化,然后轮回播放,这其中涉及的是Cesium.CallbackProperty Cesium.Image..._cesium加载涟漪图
文章浏览阅读977次。onlyOffice 服务端 客户端 相关开发整理功能:所有客户端都可用云端部署服务查看 预览 doc ppt excel编辑权限控制开发技术准备用户服务器端 提供保存接口用户浏览器端 提供生成文件 key 标示(刷新后重新生成)安装server 端docker pull onlyoffice/documentserverdoc:ports:- 8686:80/tcptty: trueimage..._onlyoffice callbackurl
文章浏览阅读5.6k次,点赞3次,收藏4次。废话不多说: DateFormatdf=newSimpleDateFormat("yyyy-MM-ddHH:mm:ss"); try { Dated1=df.parse("2018-03-2613:31:40"); Dated2=df.parse("2018-01-0211:30:24");..._java两个时间相减得到分钟
文章浏览阅读130次。PHP性能优化工具–xhprof安装,这里我先贴出大致的步骤:1.获取xhprof2.编译前预处理3.编译安装4.配置php.ini5.查看运行结果那么下面我们开始安装xhprof工具吧:1.获取xhprof可以输入网址直接下载,或者wget1234#wget http://p..._php 安装xprof
文章浏览阅读847次。RK3399-android7.1-mipi转lvds_struct video_timing video_1920x1080_60hz
文章浏览阅读434次。一个正则表达式的教程可以参看(里面有个测试正则表达式的工具)正则表达是用来匹配字符串的好东东。如果用户熟悉Linux下的sed、awk、grep或vi,那么对正则表达式这一概念肯定不会陌生。由于它可以极大地简化处理字符串时的复杂度,因此现 在已经在许多Linux实用工具中得到了应用。千万不要以为正则表达式只是Perl、Python、Bash等脚本语言的专利,作为C语言程序员,用户同 样可以在自己的..._用正则表达定义变量