引入外部样式文件(link):
<link type="text/css" rel="stylesheet" href=" ">
href路径写你需要的链接地址,与图片插入路径类似
选择器:
元素选择器(直接对标签进行设置):
eg:
*{
border:1px black soild;
padding:4px;
}
这是通配符,此代码能设置html中所有能设置的标签border和padding
div
{
background:grey;
font-size:30px;
}
这个是设置了html的所有div标签为这个样式
常用的属性选择器
E{...}:指定该CSS样式对所有的E元素起作用
E[attr]{...}:指定该CSS样式对具有attr属性的E元素起作用
E[attr=value]{...}:指定该CSS样式对所有包含attr属性,且属性值为value的字符串,E起作用。
E[attr^=value]{...}:指定该CSS样式对所有包含attr属性,且属性值为value开头的字符串,E起作用。
E[attr*=value]{...}:指定该CSS样式对所有包含attr属性,且属性值为包含value的字符串,E起作用。
下面写几个简单的样式个大家看看:
<head>
<style>
div{
width:300px;
height:30px;
background:red;
border:1px solid black;
padding:10px;
}
/* 对有id属性的div元素起作用的CSS样式*/
div[id]{
background-color:green;
}
/* 对id属性以xx开头的div元素起作用的css样式*/
div#zzxx{
background:orange;
color:#fff;
}
/*对id值包含xx的div元素起作用的CSS样式*/
div[id*=xx]{
background:blue;
}
/*对id属性值等于xx的div元素起作用的css样式*/
div[id=xx]{
background:#111;
color:#fff;
}
</style>
</head>
<body>
<div > 没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx字符串的div元素</div>
<div id="xxyy">id属性值以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
效果图片:
id选择器,class选择器。
选择器 | style中写法 | 权重 | |
class | . | .long{...} | 10 |
id | # | #long{...} | 100 |
这俩个选择器是很使用也是使用次数最多的选择器
兄弟选择器:
Selector1~Selector2{...}/*Selector1、Selector2都是有效的选择器*/
eg:
/*匹配id为android*的元素后面、class属性为long的兄弟节点*/
#android~.long
{
background:red;
}
选择的是#android后面class="long"的所有标签,如果#android后面有多个class="long"的标签,那是选定多个,但是不能选中前面class="long"的标签。
选择器的组合:
如果想让一份CSS样式对多个选择器起作用。那就可以利用选择器组合来实现。选择器组合的语法如下:
Selector1,Selector2,Selector3{...} /*Selector1、Selector2、Selector3都是有效的选择器*/
对于这个组合而言,{...}定义的样式会对前面列出的所有选择器匹配的元素起作用。
伪类选择器:
:first-letter:该选择器对应的CSS样式对指定对象内的第一个字符起作用。
:first-line:该选择器对应的CSS样式对指定对象内的第一行内容起作用。
:before:该选择器与内容相关的属性结合使用,用于在指定对象内部的前端插入内容。
:after:该选择器与内容相关的属性结合使用,用于在指定对象内部的尾端插入内容。
接下来给大家演示一下代码:
<head>
<style>
/*定义对作为其父元素的第一个子节点的li元素起作用的css样式*/
li:first-child{
border:1px solid black;
}
/*定义对作为其父元素的最后一个子节点的li元素起作用的css样式*/
li:last-child{
background:#aaa;
}
/*定义对作为其父元素的第2个子节点的li元素起作用的css样式*/
li:nth-child(2){
color:#888;
}
/*定义对作为其父元素的倒数第2个子节点的li元素起作用的css样式*/
li:nth-last-child(2){
font-weight:bold;
}
/*定义对作为其父元素的唯一的子节点的li元素起作用的css样式*/
span:only-child{
font-size:80pt;
font-family:"隶书";
}
</style>
</head>
<body>
<ol>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
</ol>
<ul>
<li>6666666</li>
<li>7777777</li>
<li>8888888</li>
<li>9999999</li>
<li>
<span>aaaaaaa</span>
</li>
</ul>
<span>疯狂java联盟</span>
效果图:
常见的UI元素状态选择器:
:link :匹配Selector选择器且未被访问(点击)前的元素。(通常只能是超链接)
:visited :匹配Selector选择器且访问过的元素。(通常只能是超链接)。
:active :匹配Selector选择器且处于被用户激活。(通常在被点击与释放之间)
:hover :悬停状态。
:focus :已得到焦点元素。
:disable:当前不可用状态。
:default:页面打开时处于打开状态。
以hover为例子:
<head>
<style>
td{
border:1px solid black;
padding:4px;
}
tr:hover{
background-color:#aaa;
}
</style>
</head>
<body>
<table style="width:400px; border-collapse:collapse">
<tr>
<td>111111</td>
</tr>
<tr>
<td>222222</td>
</tr>
<tr contenteditable="true">
<td>333333</td>
</tr>
</table>
代码中的;
tr:hover{
background-color:#aaa;
}
就设置了<td>标签鼠标悬浮的状态:(background:#aaa)
如图:
这是将鼠标悬浮在上面发生的属性改变。
脚本中修改显示样式:
一、获取到需要设置CSS样式的目标元素,例如可以使用getElementById()方法。
二、修改目标元素CSS样式,常用方法有俩种。
修改行内CSS属性值:例如使用: “obj.style.属性名=属性值"的js代码即可。
修改HTML元素的class属性值:使用如:“obj.className=class选择器”的js脚本即可
(第一行修改的是单个属性。第二行修改的是一套属性)
下面给大家代码举例一下:
eg:动态增加立体效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.solid{
width:160px;
padding:5px;
text-align:center;
border-right:#222 4px solid;
border-top:#ddd 4px solid;
border-left:#ddd 4px solid;
border-bottom:#222 4px solid;
background:#ccc;
}
</style>
</head>
<body>
<script >
function chg()
{
document.getElementById('up').className="solid";
}
</script>
<input type="button " onclick="chg()" value="增加立体效果">
<div id="up"> 有立体效果的层</div>
</body>
</html>
代码中将id="up"的div改成了class="solid"属性的div.所以div样式也发生改变
效果图:
随机改变背景颜色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function change()
{
var bgColor="" ;
for(var i=0;i<6;i++)
{
bgColor += Math.round(Math.random()*16);
}
document.body.style.backgroundColor="#"+bgColor;
}
document.onclick=change;
</script>
</body>
</html>
循环6次;每次随机设置一个0~16的16进制数字;前面加“#‘.把bgColor等于它。形成了一个生成#000000~#FFFFFF之间的背景颜色,用点击事件触发。
效果图: