黑马程序员技术交流社区
标题: 学习笔记——认识CSS [打印本页]
作者: Zy_阿匠 时间: 2017-1-3 15:42
标题: 学习笔记——认识CSS
本帖最后由 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选择器>类选择器>标签选择器
作者: 方传奇 时间: 2017-1-3 21:12
好帖，谢谢分享
作者: 浮世散人 时间: 2017-1-10 00:03
总结的很到位
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |