以前不知道什么是CSS3,大概有听说过,原来一直做的东西和这个真的不太相关,现在有点兴趣,稍微学一下,作为入门的学习吧,也顺便把学习的过程记录下来。
HTML5和CSS3结合的比较紧密,偶现在从CSS3开始了。
先学的是选择器,
啥是选择器,偶先看看,
看了一会儿,好像选择器是能够把样式和元素绑定起来的一种东东,通过修改选择器,就可以制定元素的一些样式,很方便。
再进入看一下,
原来每个元素都有id,这个id是唯一的标识,如
div[id="divok"]{background:red;}
就可以让id为divok的div元素的背景颜色指定为红色。
选择器还可以用通配符进行匹配,很是方便。
通配符有这些:
^,开头字符匹配
?,结尾字符匹配
*,包含字符匹配
书写了下面的一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
[id^=section]{
background-color:yellow;
}
[id$=\-1]{
background-color:red;
}
</style>
</head>
<body>
<div id="section1">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>
</body>
</html>
其中用到了属性选择器,如下:
<style type="text/css">
[id^=section]{
background-color:yellow;
}
[id$=\-1]{
background-color:red;
}
</style>
下来是伪选择器的使用,
什么first-letter,first-line,before,after等等
p:first-line{color:#0000FF}
p:first-letter{color:#FF00FF}
li:before{content:"我要在你前面"}
再下来是选择器root,not,empty和target的学习啦
body *:not(h1){
background-color:yellow;
}
:empty{
background-color:green;
}
:target{
background-color:red;
}
target选择器可以做菜单,感觉挺不错的。
下来就是first-child、last-child、nth-child、nth-last-child
随后是UI元素的状态为类选择器了
这个很多,但是不是每种浏览器都支持。
最后做了一个例子程序,用来纪念一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
[id^=section]{
background-color:yellow;
}
[id$=\-1]{
background-color:red;
}
a[href$=\/]:after,a[href$=html]:after,a[href$=html]:after{
content:"[web网页]";
color:red;
}
a[href$=jpg]:after{
content:"[]jpeg图像]";
color:green;
}
p:first-line{color:#0000FF}
p:first-letter{color:#FF00FF}
p::selection{
background:blue;
color:#fff;
}
li:before{content:"我要在你前面"}
:root{
background-color:limegreen;
}
body *:not(h1){
background-color:yellow;
}
:empty{
background-color:green;
}
:target{
background-color:red;
}
li:first-child{
background-color:skyblue;
}
li:last-child{
background-color:blue;
}
input[type="text"]:hover{
background-color:greenyellow;
}
input[type="text"]:focus{
background-color:white;
}
input[type="text"]:active{
background-color:red;
}
input[type="text"]:default{
background-color:yellow;
}
input[type="text"]:enabled{
background-color:yellow;
}
input[type="text"]:disabled{
background-color:purple;
}
input[type="text"]::selection{
background:gray;
color:#fff;
}
input[type="text"]:invalid{
background:red;
color:#fff;
}
input[type="text"]:valid{
background:white;
color:#000;
}
input[type="text"]:required{
border-color:red;
border-width:3px;
}
input[type="text"]:optional{
border-color:black;
border-width:3px;
}
td::selection{
background:gray;
color:#fff;
}
div~p{
background-color:#00ff00;
}
</style>
<script>
function radio_onchange()
{
var radio = document.getElementById("radio1");
var text = document.getElementById("text10");
if(radio.checked)
{
text.disabled="";
}
else
{
text.value="no";
text.disabled="disabled";
}
}
</script>
</head>
<body>
<div id="section1">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>
<ul>
<li><a href="http://www.google.cn">Google</a></li>
<li><a href="http://www.google.cn/lgoin.html">CCS3</a></li>
<li><a href="http://www.google.cn/photo.jpg">PIC</a></li>
</ul>
<p>段落的第一行。<br>段落的第二行。</p>
<p>This is an english text.</p>
<ul>
<li>我和你,心连心</li>
<li>我和你,心连心</li>
<li>我和你,心连心</li>
</ul>
<h1>根选择器</h1>
<table border="0" cellpading="0" cellspacing="0">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>E</td><td>F</td><td></td></tr>
</table>
<p id=”menu“>
<a href="#text1">示例文字1</a>
<a href="#text2">示例文字2</a>
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此处略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此处略去</p>
</div>
<form>
<p>姓名:<input type="text" name="name" /></p>
<p>地址:<input type="text" name="address" /></p>
<input type="radio" id="radio1" name="radio" οnchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio" οnchange="radio_onchange();">不可用</radio><br>
<input type="text" id="text10" />
<br><input type="text" required placeholder="必须输入" /><br>
<input type="text" optional />
</form>
<div>
<p>p元素为div元素的子元素</p>
</div>
<p>p元素为div的兄弟元素</p>
</body>
</html>