CSS
引言：学习前端基础知识。第二课 CSS 基础知识。
时间：2017年11月22日
作者：JustDo23
html_css_js
01. 基础知识
-
CSS是用来为结构化文档添加样式的一种计算机语言。-
Cascading Style Sheets即层叠样式表 -
CSS最主要的目的是将文件的内容和显示分隔开来 -
CSS可以外部引用故复用性强提高工作效率 -
CSS可以静态修饰网页同时可以配合脚本动态格式化网页 -
层叠就是对一个元素多次设置同一个样式最终使用最后一次设置的属性值。
-
02. 样式语法
-
简单代码
<!DOCTYPE html> <html> <head> <title>前端入门CSS</title> <meta charset="utf-8"> <!-- CSS样式 --> <style type="text/css"> p { font-size: 16px;/*设置文字字号*/ color: black;/*设置文字颜色*/ font-weight: bold;/*设置字体加粗*/ } span { color: blue; } </style> </head> <body> <p>这是一个段落。<span>单独强调。</span></p> </body> </html> -
CSS样式由选择符和声明组成，而声明又由属性和值组成。css_grammar- 选择符：又称选择器，指明网页中要应用样式规则的元素。
- 声明：被大花括号包裹，属性与值之间用冒号分隔，多条属性用分号分隔。
03. 插入位置
-
内联式
<body> <!-- 内联式 --> <p style="color:green;font-size:12px">这里使用内联式。</p> </body>-
css直接写在HTML标签中
-
-
嵌入式
<head> <!-- 嵌入式 --> <style type="text/css"> span { color: blue; } </style> </head>-
嵌入式必须写在<style></style>之间 -
嵌入式一般写在<head></head>之间
-
-
外部式
<head> <!-- 外部式 --> <link rel="stylesheet" type="text/css" href="/css/master.css"> </head>- 属性
href指定外部样式文件 - 外部样式文件扩展名
.css - 外部文件中直接指定样式
span { font-size: 12px; } - 属性
-
优先级
- 就近原则即离被设置元素越近优先级越高
- 一般情况下，权值相同
内联式 > 嵌入式 > 外部式
04. 选择器
<head>
<style type="text/css">
/*标签选择器*/
span { color: blue; }
/*类选择器*/
.className { color: pink; }
/*ID选择器*/
#idName { color: pink; }
/*子选择器*/
.firstGeneration>span {
border: 1px solid red;/*边框及颜色*/
}
/*后代选择器*/
.allGeneration span { border: 1px solid red; }
/*通用选择器*/
* { color: black; }
/*伪类选择器*/
a:hover { color: blue; }
/*分组选择器*/
.groupOne,.groupTwo { border: 1px solid red; }
</style>
</head>
<body>
<span>标签选择器。</span>
<p class="className">类选择器。</p>
<p id="idName">ID选择器。</p>
<p class="firstGeneration">子选择器。<span>第一代应用。<span>其他代不应用。</span></span>
</p>
<p class="allGeneration">后代选择器。<span>第一代应用。<span>其他代同样应用。</span></span>
</p>
<a href="#">伪类选择器。鼠标滑过触发。</a>
<div class="groupOne">分组选择器。<span class="groupTwo">同一组使用同一颜色</span></div>
</body>
- 属性
ID是唯一的所以ID选择器只能在文档中使用一次。 - 属性
class可以同时指定多个类名用空格分隔。 - 伪类选择器可以为标签的某种状态设置样式。兼容性差。
css_selector
05. 特性
继承性：有些属性可以继承；有些属性不会被继承。
-
特殊性：权值
-
标签的权值为1 -
类选择符的权值为10 -
ID选择符的权值最高为100
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ -
层叠性：相同权值情况下，后设置样式覆盖之前设置样式，就近原则。
重要性： 使用
!important语句将权值提升至最高。
06. 文字排版
<head>
<style type="text/css">
p {
font-family: "Microsoft Yahei";/*字体*/
font-size: 16px;/*字号*/
color: #FF553E;/*颜色*/
font-weight: bold;/*加粗*/
font-style: italic;/*斜体*/
text-decoration: underline;/*下划线*/
text-decoration: line-through;/*删除线*/
text-indent: 2em;/*段首缩进*/
line-height: 2em;/*行间距*/
letter-spacing: 20px;/*汉字或字母间距*/
word-spacing: 50px;/*单词与单词间距*/
text-align: center;/*块元素中内容居中*/
}
</style>
</head>
-
2em的意思就是文字的2倍大小。
07. 元素分类
-
分类
-
块状元素
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
- 元素的宽度和高度和行高以及顶和底边距是可以设置。
- 默认情况下元素宽度和父容器的宽度相同。
-
内联元素也称为行内元素
- 和其他元素在同一行。
- 元素的宽度和高度以及顶和底边距是不可设置。
- 元素的宽度是包裹内容的宽度，不可改变。
-
内联块状元素
- 同时具备块级元素和内联元素的特点。
- 和其他元素在同一行。
- 元素的宽度和高度和行高以及顶和底边距可以设置。
-
块状元素
-
改变：
- 属性
display:block将元素设置为块级元素 - 属性
display:inline将元素设置为行内元素 - 属性
display:inline-block将元素设置为内联块状元素
- 属性
08. 盒模型
[图片上传失败...(image-1c1fa7-1520935055978)]
<head>
<style type="text/css">
/*边框设置*/
div {
border-width: 2px;/*边框宽度*/
border-style: dashed;/*虚线*/
border-color: red;
}
/*边框设置简写*/
p {
border: 2px dashed blue;
}
li {
width: 200px;/*内容宽度*/
height: 300px;/*内容高度*/
border: 1px solid red;
padding: 20px;/*上右下左内边距*/
margin: 10px 10px 10px 10px;/*上右下左外边距*/
}
</style>
</head>
- 元素内容和边框之间的内间距，称为填充。
- 元素与元素之间的外间距，称为边界。
- 元素整体占位宽度
marginLeft + paddingLeft + width + paddingLeft + marginRight
09. 小结
- 层叠样式表
语法结构,插入位置,选择器,元素分类 盒模型- 继续学 CSS 基础进阶
