前端学习笔记之2 CSS样式
2017-09-05 本文已影响8人
庞仕山
引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端, 增强一下技术能力; 这篇文章只是作为我的笔记发在这里, 供自己业余时间看看; 全是很基础的东西, 看到的小伙伴 酌情略过 吧_
1. 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<!--
单值属性: 只有一个属性值
复合属性: 有多个属性值
-->
<body style="background-color: white">
<!--行内样式-->
<div style="color: red; font-size: 30px; background-color: #101fff">我是div</div>
<p style="font-size: 30px; border: 2px solid;">我是p标签段落</p>
</body>
</html>
2. 页内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-页内样式</title>
<!--
网站 = N个网页 + 服务器 + 数据库
-->
<!--页内样式标签-->
<style>
body {
background-color: antiquewhite;
}
div {
color: red;
font-size: 30px;
border: 3px dashed lightgray;
}
p {
color: green;
font-size: 20px;
background-color: white;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签</p>
</body>
</html>
3. 外部样式
-
创建外部样式如下
4687E009-B3BC-40EB-9BC8-F055C58F7A3C.png
-
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-外部样式</title>
<!--引入-->
<link href="CSS/index.css" rel="stylesheet">
<!--
CSS规律
1.就近原则:
2.叠加原则:
-->
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
4. 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
div {
color: red;
}
p {
color: green;
}
/*类选择器*/
.test1 {
color: black;
}
/*id选择器*/
#first {
font-size: 30px;
}
/*并列选择器 相当于逻辑或, 逗号表示或者*/
p , #first {
border: 1px #ffd1f5 dashed;
}
/*复合选择器 相当于逻辑与, 中间啥也不写(空格都不能有)*/
div.test1 {
border: 2px red solid;
}
/*后代选择器*/
div .test3 a {
font-size: 50px;
}
</style>
</head>
<body>
<div id="first">11111111111111111111</div>
<div>11111111111111111111</div>
<div>11111111111111111111</div>
<div class="test1">11111111111111111111</div>
<p class="test1">22222222222222222222222222</p>
<p>22222222222222222222222222</p>
<p>22222222222222222222222222</p>
<p>22222222222222222222222222</p>
<div id="test2">
<p class="test3">我是段落
<a href="#">我是特别大的超级链接</a>
</p>
</div>
</body>
</html>
5. 选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-选择器的优先级别</title>
<!--
CSS遵循
1.相同级别的选择器: a.就近 b.叠加
2.优先级
important > 行内(内联) > id > 类 > 标签 > 通配符 > 子类标签
3.选择器的针对性越强, 他的优先级越高 (权值)
-->
<style>
/*important 权值为1000*/
/*行内属性大于所有其他属性, 唯独小于important*/
div {
color : black !important;
}
/*权值为 100 + 1*/
div#main {
color : burlywood;
}
/*id选择器*/ /*权值:100*/
#main {
color: black;
}
#second {
color: burlywood;
}
/*类选择器*/ /*权值:10*/
.test1 {
color: goldenrod;
}
.test2 {
color: purple;
}
/*标签选择器*/ /*权值:1*/
div/*权值:1*/ {
color: red;
}
div/*权值:1*/ {
color: green;
}
/*通配符选择器, 最好不要用, 性能很差, 优先级最低*/ /*权值:0*/
* {
font-size: 50px;
}
</style>
</head>
<body>
<!--id只能有一个-->
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
6. 标签类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
background-color: red;
width: 300px;
height: 100px;
}
p {
background-color: green;
width: 50px;
}
span {
background-color: #ffd1f5;
width: 300px;
height: 100px;
}
a {
background-color: teal;
}
input {
width: 300px;
height: 50px;
}
button {
width: 250px;
height: 20px;
}
</style>
</head>
<body>
<!--块级标签 (单独占一行) 如:div, p, h1, h2, ul, li-->
<div>我是块级标签</div>
<p>段落</p>
<!--行内标签 (多行能同时显示在同一行, 高度和宽度取决于内容的尺寸, 无法改变高度) 如: span, a, label-->
<span>我是span, 行内标签</span>
<a href="#">我是超链接, 行内标签</a>
<span>我是span, 行内标签</span>
<span>我是span, 行内标签</span><br>
<!--行内-块级标签 (多个可以显示在同行, 能随时设置宽高)-->
<input placeholder="我是输入框">
<button>我是按钮</button>
</body>
</html>
