前端学到残废的入门程序员
引言
论如何逼疯一个转行程序员,那就让他去学web前端吧。这真的是太崩溃了吧,很多时候做web都会写着写着就崩溃了,真的是做了一个月,然后全部推到重写。哎,崩溃的我又来学习web前端了,走起走起。
CSS介绍
css(Cascading Style Sheets)层叠样式表,用来定义如何显示HTML元素。也就是说,这个css可以定义html中的各种元素是以什么样式展现在我们眼前,让我们在对网页进行编写的时候可以让html更加简洁易懂,不会是把每一个定义都写在html的元素中,从而再后期维护时出现反复更改的问题。
在同一个html元素被多种样式重复定义是,会按照优先级进行选择。优先级由高到低为:内联样式(HTML元素内部) > 内部样式表(head标签内部) > 外部样式表 > 浏览器缺省样式
举例
内联样式:
<body>
<p style="font-size: 5em">多种样式表</p>
</body>
内部样式表:
<head lang="en">
<meta charset="utf-8">
<title>样式表</title>
<style>
p{
font-size: 4em;
}
</style>
</head>
外部样式表:
<head lang="en">
<meta charset="utf-8">
<title>样式表</title>
<link rel="stylesheet" href="css/chapter4.css"/>
</head>
p{
font-size: 3em;
color: blanchedalmond;
}
##选择器
以内部样式表的演示讲解选择器。
元素选择器
<head lang="en">
<meta charset="UTF-8">
<title>选择器</title>
<style>
p{
color:darkcyan;
}
h1,h2,h3,h4,h5,h6{
color:burlywood;
}
</style>
</head>
<body>
<p>单个元素选择器</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
</body>
派生选择器
li strong{
font-style:italic;
font-weight:normal;
}
<strong>派生选择器</strong>测试<br>
<li><strong>派生选择器</strong>测试</li><br>
id选择器
#sty{
font-size:20px;
color:chocolate;
font-weight:bold;
}
<div id="sty">id选择器</div>
/* id选择器的派生选择器 */
#sty p{
font-style:italic; /* 斜体 */
text-align:right; /* 文本对齐方式,靠右对齐 */
margin-top:0.5em; /* 距离上一个元素的间距 */
}
<div id="sty">id选择器
<p>id选择器的派生选择器</p>
</div>
类选择器
.center{
font-size:2em;
font-family:"宋体";
text-align:center;
margin-top:0.5em;
}
<p class="center">类选择器</p>
/* 类选择器的派生选择器 */
table{
margin: 0 auto;
}
.center{
font-size:2em;
font-family:"宋体";
text-align:center;
margin-top:0.5em;
}
.center id{
background-color:burlywood;
color:darkcyan;
}
基于元素的类选择器
td.tsty{
background-color:darkcyan;
属性选择器
<style>
p{
font-size: 2em;
}
/*元素中设置了title属性*/
[title]{
color: darkseagreen;
}
/*元素中设置了title属性且title属性值为ti*/
[title='ti']{
font-weight: bold;
}
/* 包含指定值hello的 title 属性的所有元素设置样式。适用于由空格分隔的属性值 */
[title~=hello] {
color:red;
}
/*title属性值为hello或由hello通过-连接的字符*/
[title|=hello]{
color: blanchedalmond;
}
/*属性选择器在为不带有 class 或 id 的表单设置样式,所有type=text的输入框均采用这种如下样式,*/
input[type="text"] {
width:150px;
background-color:yellow;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<p>1==莫因诗卷愁成 <ruby>谶<rt>chen</rt></ruby>,春鸟秋虫自作声。</p>
<p title="test">2==十有九人堪白眼,百无一用是书生。</p>
<p title="ti">3==风蓬飘尽悲歌气,泥絮沾来薄幸名。</p>
<p title="hello world">4==hello world</p>
<p title="world hello">5==world hello</p>
<p title="world-hello">6==world-hello</p>
<p title="hello">7==hello</p>
<p title="hello-world">8==hello-world</p>
<form action="#" method="get">
用户名:<input type="text"/><br/>
地 址:<input type="text"/><br/>
</form>
/*
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词
[attribute^value] 匹配属性值以指定值开头的每个元素
[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素
*/