本帖最后由 Zy_阿匠 于 2017-1-3 15:52 编辑
第一部分
第1课时
1、CSS的定义为是层叠样式表,cascading style sheets
2、与HTML的关系为,CSS必须在HTML的基础上来定义样式
3、CSS的作用就是为了给页面加样式,而HTML的作用就是为网页做结构
第2课时
1、所有的标签都有个默认样式(缺省样式),在网页开发中优先级是最低的,可以更改
但是,如果要是CSS定义的样式,更改浏览器默认样式、改不了
2、所有的CSS标签都可以有name、style以及ID属性。
基本语法:style="color:red;font-size:12px;"
3、行内样式是在标签内设置style属性而实现的样式
4、emmet语法:ul>(li>a[href="#"])*3
第3课时
1、嵌入样式是在head中嵌入style标签来设置样式
基本语法:<style type="text/css">
2、CSS当中的注释是用/*开始,以*/结尾
3、前景色用color设置,背景色用background-color设置
4、外联样式,也是最常用的样式。
基本语法:<link rel="stylesheet" href="">
第4课时
1、导入样式@import url(css/main.css),由于现在前段自动化工具的流行,和优先级的问题
现在用的越来越少,最推荐的用法还是外联样式
2、要用导入样式,必须写在所有样式之前
3、在CSS文件中也可以使用导入样式
第5课时
1、CSS的基本语法:由选择符、花括号、属性声明构成;对换行、空格及大小写不敏感,但还是要尽量用小写字母
例如:
[CSS] 纯文本查看 复制代码 p{color:red;
font-size:12px;
2、文件的命名千万不要用中文名,一定要用英文名
第二部分
第1课时
1. 注释的用法,以“/*”开始,以“*/”结束
2. 注释分为:单行注释、多行注释、模块注释及开始注释
3. 注释不可以嵌套其他注释
第2课时
1. 标签选择器,针对页面中所有属于该标签的样式进行设置
2. 通配符选择器*,穿透力最强,可以覆盖继承的样式,主要是
针对页面中所有的标签进行样式设置
第3课时
1. ID选择器在页面中的符号为“#”,每个标签的ID值也是整个HTML页面
中唯一的
2.基本语法:
[CSS] 纯文本查看 复制代码
#p{ font-size: 12px;
color: red;
}
3.ID选择器的命名规范:(1)只能有“字母”、“_”和“数字”组成
(2)只能以字母开头,严格区分大小写
(3)ID的命名一定要具有语义化且要有含义
不能以标签名字命名,这是没有工作经验的表现
第4课时
1. 类选择器的基本语法为:.class名称{属性:属性值}
2. 在不同的标签中可以有相同的类名称;在同一个标签中,可以同时设置不同的类名称
3. 基本语法:
[CSS] 纯文本查看 复制代码 .p1{ font-size: 12px;
color: yellow;
}
<p class="p1">....</p>
第5课时
案例:
[CSS] 纯文本查看 复制代码 .red-pink{
font-style: normal;
color:pink;
}
.purple-black{
color:purple;
}
li{
backguound-color:yellow;
}
#head-list{
font-size: 14px;
color:red
font-family: ;
}
<h1>这个是<em class="red-pink">大标题</em></h1>
<p>这个是<span class="purple-black">段落</span></p>
<ul>
<li id="head-list">我是列表1</li>
<li>我是列表2</li>
<li>我是列表3</li>
</ul>
第6课时
1. 复合选择器,由标签及指定该标签中的某类组成,通常在实际开发中用的不多
例如:h1 .class{属性名:属性值}
2.复合选择器中后代选择器,由“父级标签的类名”+“空格”+“后代标签”组成,
例如:
[CSS] 纯文本查看 复制代码 <div class="box">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
.box li{
属性名:属性值;
}
3. 并集选择器,指具有相同设置样式的一系列标签组成,由“标签名”+“逗号”组成,例如:
h1, p, h2 {
属性名:属性值;
}
4.子代选择器,让父级选择器选择子代选择器的一种复合选择器,只能选择子代,孙代及以下选择不了
基本语法由“父级标签”+“>”+“子代标签”构成,例如:
div>p{
属性名:属性值;
}
第三部分
第1课时
1、属性选择器,由标签+“[]”+属性组成
2、例如:
[CSS] 纯文本查看 复制代码 <style>
h1[id] { color: red;
}
h2[class] { background: purple;
}
input[type="value"] { font-size: 12px;
}
</style>
<h1 id="style">dasdf</h1>
<h2 class="style">dsadasfg</h2>
<input type="text">
第2课时
1、伪类不是真正存在的类,它只是代表标签的某种状态,包括:
未被访问过标签的伪类“:link”
已被访问过标签的伪类“:visited”
鼠标悬停时的伪类“:hover”
元素被激活时的伪类“:active”
得到焦点时元素的伪类“:focus”
2、在CSS样式中,由于继承性,在“style”中设置样式时,一定要符合“LoVe HAte”的
原则顺序来设置,即::link 、:visited、:hover、:active
3、例如:
[CSS] 纯文本查看 复制代码 <style>
a:link {
color: purple;
}
a:visited {
color: yellow;
}
a:hover {
color: white;
background-color: silver;
}
a:active {
color: blue;
}
.mes_title:focus{
background-color: green;
}
</style>
<body>
<a href="#">新浪</a>
<a href="#">传智</a>
<a href="#">搜狐</a>
<a href="#">百度</a>
<input type="text" class="mes_title">
</body>
第3课时
1、伪类指标签的某种状态,而伪元素指向标签所包裹的内容
2、常用伪元素有:
:first-line 指向标签的第一行内容;
:first-letter指向标签内容的第一个字母;
:first-child 选择属于第一个子元素的元素;
:atter设置元素之前的内容,可以配合属性“content”使用;
:before设置元素之后的内容,可以配合属性“content”使用;
注:"content"属性,仅仅只有在“:after”和“:before”伪元素中可以使用
3、把行内标签设置成为块状标签:
类别选择器 {
display: block;
}
4、例如:
[CSS] 纯文本查看 复制代码 <style>
.first_msg:first-line {
color: red;
}
.first_msg:first-letter {
color: green;
}
span:first-child{
font-size: 12pxp;
}
.mid_txt:before, .mid_txt:after {
content: "...........";
display: block;
}
</style>
<body>
<p class="first_msg">
内容
<span>第二个</span>内容
<span>第三个</span>
<span>第四个</span>
</p>
<div>
<hr>
</div>
<div class="mid_txt">
内容
</div>
<div>
<hr>
</div>
</body>
第4课时
1、CSS层叠性,离用户或者内容最近的样式一定会覆盖较远的样式
2、CSS继承性,子级元素会继承父级元素的样式,但也不是全部样式都可以继承
如:关于文字排版的相关样式都可以继承,像:color、font-size、font-family、
text-align、line-height等
关于盒子模型的属性都不可以继承:像:margin、padding、border、background-color
width、height、position等
第5课时
1、CSS的特殊性:优先级,即:
继承性样式>浏览器默认的样式;
通配符选择器的样式>CSS继承性的样式;
标签选择器的样式>通配符选择器的样式;
类选择器的样式>标签选择器的样式;
ID选择器的样式>类选择器的样式;
行内样式>ID选择器的样式
2、复合选择器的样式比较,主要看复合选择器中的各个选择器的权重值
一般情况下,行内样式的权重值最高,其次是ID选择器,再次是类选择器,
最后是标签选择器,即:
权重值比较:行内样式>ID选择器>类选择器>标签选择器 |