前端学习第二周
学习笔记
前端部分
1.CSS属性选择器1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<head>
<style type="text/css">
[title]{
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
2.属性和值选择器——多个值1
2
3
4
5
6
7<head>
<style type="text/css">
[title~=hello]{
color: red;
}
</style>
</head>
以下内容只要包含了title~=后面的内容，都会应用此属性
注意CSS的规范问题， “{”写在上一行，“：”后面有空格
背景颜色，或者向文本之外有延伸
1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
{background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)
p.no2 {background-color: gray; padding: 20px;}
</style>
<body>
<p class="no2">这个段落设置了内边距。</p>
</body>
对于标题和段落的属性分开设置，最后用class引用
- 背景图像
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif); padding: 20px;}
</style>
<!-->设置 <-->
<body>
<p =calss"flower">balabala</p>
</body>
背景图像的重复，分水平和垂直，代码如下：（repeat-y为y轴的重复）1
2
3
4
5
6
7<style type="text/css">
body{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>
背景定位:可以用描述性的关键字，或者长度百分比表示位置，这些词一般成对出现，一个表示水平，一个表示垂直
1
2
3
4
5
6
body{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}防止滚动 scroll为默认值
1
2
3
4
5
6
7
body {
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
/*关键*/
}设置文本的背景
1
2
3
4
5
6
7
<style type="text/css">
span.highlight{
background-color:yellow
}
</style>
<p><span =calss"highlight">balabala</span></p>段落缩进(以下为缩进两个字的长度)
1
p{text-indent: 2em}
文本颜色
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
</style>
<body
<h1>balabala</h1>
<p>balabala</p>
</body>链接的设置，注意：a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
1
2
3
4
5
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */创建一个链接框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
a:link,a:visited{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#7A991A;
}
</style>框模型：（均可单边设置）
padding 内边距（元素与边框的距离）关键字有top bottom right left
margin 外边距
边框样式 border-style ：solid（实线） outset（凸起）
边框厚度 关键词：thin medium thick 也可以用像素或者百分比设置
外边距和内边距一样
15.清除浮动
- 为什么要清除浮动？
在子边框设置了浮动以后，会脱离文档流，造成父边框没有办法撑开，没有撑开造成的后果就是，父边框的样式包括背景颜色，内边距和外边距无法显示 如何使父边框撑开？
这就需要清除浮动，有以下三种方法直接设置父边框的高度，根据内容高度、内外边距与边框的宽度来计算
eg:内容高度100px,内外边距各20px，子边框的边框宽度2px,最后，父边框的高度设置为142px;html部分不变1
2
3
4
5
6
7<style>
<head>
.main {
height:142px;
}
</head>
</style>新建一个样式选择器为clear
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<style>
<head>
.main {
...
}
.clear{
clear:both;
}
</head>
</style>
<body>
<div class="main">
<div class="...">
...
</div>
<div class="clear">
</div>
</div>
</body>父级css代码中定义一句话，html代码部分不变，这种方式代码量最少
1
2
3
4
5
6
7
8<style>
<head>
.main {
height:142px;
overflow:hidden;
}
</head>
</style>
- CSS reset(浏览器样式重置)
markdown部分
- 标题：分级数的标题“#”
- 代码块：三个“~”
- 属性：粗体与斜体“*”
- 分割线：三个“*”
- 表格：表头与下面的内容用“—|”隔开
- 引用：用英文的 “>”
- 注意：所有的符号后面需要加空格
- 图片与链接：与HTML类似
学习心得
以下的class是什么？为什么下面的样式不可显示？title是什么（title 元素的内容会显示在浏览器的标题栏中）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
<style type="text/css">
[title=W3School]{
border: 5px solid blue;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<img title="W3School" src="/i/w3school_logo_white.gif" />
<br />
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式：</h1>
<p title="greeting">Hi!</p>
<a class="W3School" href="http://w3school.com.cn">W3School</a>
</body>没理解继承
- 元素是什么，锚元素是什么
- 笔记里面第八点注释是什么原因
*后面的内容没有理解，加上这部分之后底下的框为什么会出现，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#d1 {
width:100px;
height:100px;
margin-top:20px;
margin-bottom:20px;
background-color:red;
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
background-color:blue;
}
</style>style 里面设置属性的时候前面什么时候用*，什么时候用#，什么时候都不用，还有.开头的
- float的概念以及在布局时的用法？
- 怎么做才能在点击链接的时候，让链接前面的箭头动一下
- 一个div和一个边框有什么不同
- style框里面的最后一行是不是不用加“；”？
- 既然边框会合并的话，是不是只用写一个内边距，就不用写里面边框的外边距了？
- 每一个边框都写的类似，可不可以，只写一个，其他微调
- 如何设置边框里面内容的位置？
- lang伪类
- 任务三里面main里面的内容太多，下边距设置以后,right的下边距又不对了?
- 任务三里面的团队名称为何调整不了位置？
- 任务三里面的个人logo为何不能放在一行？
- 任务三里面 class=”logo r-logo”可以改成calss=”logo”吗？