CSS3 学习first

最新推荐文章于 2024-03-05 14:35:41 发布

jzwsc

最新推荐文章于 2024-03-05 14:35:41 发布

阅读量610

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/jzwsc/article/details/8928582

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以前不知道什么是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>

jzwsc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 学习first

以前不知道什么是CSS3，大概有听说过，原来一直做的东西和这个真的不太相关，现在有点兴趣，稍微学一下，作为入门的学习吧，也顺便把学习的过程记录下来。HTML5和CSS3结合的比较紧密，偶现在从CSS3开始了。先学的是选择器，啥是选择器，偶先看看，看了一会儿，好像选择器是能够把样式和元素绑定起来的一种东东，通过修改选择器，就可以制定元素的一些样式，很方便。再进入看一下，原来每
复制链接

扫一扫