A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Zy_阿匠 初级黑马   /  2017-1-3 15:42  /  2318 人查看  /  2 人回复  /   1 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 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选择器>类选择器>标签选择器

2 个回复

倒序浏览
回复 使用道具 举报
总结的很到位
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马