HTML5收藏我爱编程

S跟着李南江学习HTML5—CSS学习

2017-02-04  本文已影响260人  yysss

<h2>CSS学习感想</h2>
　　如果说HTML让我学得热血澎湃，那么CSS可以说让我疯狂着迷，江哥有句话是我一直铭记在心的，就是<strong>html只修改语义，CSS只修改样式</strong>。CSS就是用来美化网页的，CSS的学习一共分为两大部分，一个是CSS的属性，另一个是CSS选择器。江哥先带着我们从CSS初体验，让我们感受到CSS的魅力，渗透了解各种选择器，再到学习的中转点——CSS三大特性，在CSS往后的学习中都要时刻贯彻这三大特性，接着是div和span两大块，CSS元素显示模式转换，CSS精灵图，以及浮动定位，让整个CSS的思路更新清晰，可以清楚的知道自己每一步要做什么，该用到哪些模块的知识。
　　做前端开发，需要我们有很强的<strong>大局意识</strong>，不要想到什么就把代码敲进去，在做一个项目时要先结合HTML、CSS以及后面将会学到的JS、JQ等等，来做一个简单的大局构思，从外到里，层层递进地去写，每一步代码都关系到最后成型网页的流畅度、后期优化难度、可阅读性等等。江哥教给我们的不仅是专业知识和热情，还有思维方式，最重要的是<strong>走心的努力</strong>！
　　学习CSS的过程非常的专心和开心，谢谢江哥如此走心、专业、认真的教学视频。

<strong>学HTML5就选李南江，选培训机构我只选小码哥（www.520it.com）</strong>

学习笔记

<style type="text/css">
    标签名称{
        属性名称:属性对应的值;
        ...
    }
</style>

key: value;

其中冒号:不能省略，分号;大多数情况下也不能省略，只有是最后一个属性才能省略，但是推荐都不要省略

font-style:italic;

     normal：正常的，默认就是正常的
     italic：倾斜的

     fs+tab   就是font-style:italic;
     fsn+tab  就是font-style:normal;

font-weight: bold;

lighter：细线，默认就是细线
bold：加粗
bolder：比加粗还要粗，但文字有极限，有时看不出

    fw+tab   font-weight: ;
    fwl+tab   font-weight:lighter;
    fwb+tab  font-weight:bold;
     fwbr+tab   font-weight:bolder;

100~900的整百取值

font-size:30px;
单位：px（pixel）

fz+tab   font-size: ;
fz30+tab   font-size:30px;

font-family:"宋体";

    ff+tab   font-famliy: ;

font-family:"字体1","备选方案1";

font-family:"Times New Roman","微软雅黑";

如果想给界面中的英文单独设置字体，那么英文的字体必须写在中文的前面

补充1：

在企业开发中最常见的字体有以下几个
中文：宋体/黑体/微软雅黑
英文：Times New Roman / Arial

补充2：

并不是名称是英文就一定是英文字体，因为中文字体其实都有自己的英文名称，所以是不是中文字体主要看能不能处理中文！
宋体：SimSun
黑体：SimHei
微软雅黑：Microsoft  YaHei

/*
被注释掉的东西
*/

和html的一样

<!—被注释掉的东西-->

font:style weight size family;
例如：
font:italic bold 30px "宋体";

text-decoration: underline;

underline：下划线
line-through：删除线
overline：上划线
none：什么都没有，最常见的用途就是用于去掉超链接的下划线

td+tab：text-decoration: none;
tdu+tab: text-decoration: underline;
tdl+tab: text-decoration: line-through;
tdo+tab: text-decoration: overline;

text-align: right;

left：左
right：右
center：中 

ta: text-align: left;
tar: text-align: right;
tac: text-align: center;  

text-indent: 2em;

   2em， 其中em是单位，一个em代表缩进一个文字的宽度

ti+tab：text-indent: ;
ti2e+tab：text-indent: 2em;

color:red;

color:rgb(0,0,0);

格式中第1个数字就是用来设置三原色的光源元件红色显示的亮度
第2个数字就是用来设置三原色的光源元件绿色显示的亮度
第3个数字就是用来设置三原色的光源元件蓝色显示的亮度
其中每个数字的取值范围是0~255之间，0代表不发光，255代表发光，值越大就越亮。

红色：rgb(255,0,0);
绿色：rgb(0,255,0);
蓝色：rgb(0,0,255);
黑色：rgb(0,0,0);
白色：rgb(255,255,255);

在前端开发中其实并不常用灰色，只要让红、绿、蓝的值一样就是灰色，且如果这三个值越小就越偏黑色，越大就越偏白色

color:rgba(0,0,0,0.2);

#FFEE00  FF代表r 、EE代表g 、00代表b

什么是十六进制？

和十进制一样都是一种计数方式。
在十进制中取值范围0~9，逢十进一
在十六进制中取值范围0~F，逢十六进一
十六进制转化为十进制的公式：
十六进制第一位*16 +十六进制第二位 = 十进制

* 1.5十六进制缩写

在CSS中只要十六进制的颜色每两位的值都是一样 的，那么就可以简写一位
例如：

 #FFEE00 ==  #FE0

* 注意点：

如果当前颜色对应的两位数不一样，那么就不能简写
如果两位相同的数字不是属于同一个颜色，也不能简写

标签名称{
               属性:值;
}

1、标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
2、标签选择器无论标签藏的多深都能被选中
3、只要是HTML中的标签就可以作为标签选择器（h/a/h1/p/ul/input……）

     #标签名称{
                属性: 值;
        }

1、id的名称只能由字母、数字、下划线：a~z、0~z、_
2、id名称不能以数字开头
3、id名称不能是html标签的名称

在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中id是留给JS使用的

    .类名{
           属性: 值;
       }

           <标签名称 class="类名1  类名2 …">

id相当于人的身份证不可重复
class相当于人的名称可以重复

一个html标签只能绑定一个id名称
一个html标签可以绑定多个class名称

    id选择器是以#开头
    class选择器是以.开头

 标签名称1  标签名称2{
                       属性:值;
                      }

  1.后代选择器必须用空格隔开
  2.只要最终是放到指定标签中的都是后代
  3.后代选择器不仅可以使用标签名称，还可以使用其他选择器

标签名称1 标签名称2 标签名称3{}

         <head>
    <meta charset="UTF-8">
    <title>12后代选择器</title>
    <style>
        div ul li p{
            color:red;
        }
    </style>
</head>
<body>
<p>我是文字</p>
<div>
    <ul>
        <li>
            <p>我是文字</p>
            <p>我是文字</p>
        </li>
    </ul>
    <p>我是文字</p>
    <p>我是文字</p>
</div>
<p>我是文字</p>
</body>
后代选择器的延伸 
标签名称1>标签名称2{
                     color: red;
                     }
  1. 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
  2. 子元素选择器之间需要用大于号>链连接，并且不能有空格
  3. 子元素选择器不仅可以使用标签名称，还可以使用其他选择器
  4. 子元素选择器可以通过大于号一直延续下去
   如果想选中指定标签中的所有特定的标签，用后代选择器
   如果想选中指定标签中的所有特定儿子标签，用子元素选择器

标签名称1标签名称2{
                      属性: 值;
            }

标签名称1,标签名称2{
                      属性: 值;
            }

标签名称1+标签名称2{
                         属性: 值;
            }

标签名称1~标签名称2{
                         属性: 值;
            }

标签名称:first-child{
                   color: green;
                  }

last-child：选中同级别中的最后一个标签
nth-child(n)：选中同级别中的第n个标签
nth-last-child(n)：选中同级别中倒数第n个标签
only-child：选中父元素中唯一的标签

标签名称:first-of-type{
                       color: red;
                      }

last-of-type：选中同级别中同类型的最后一个标签
nth-of-type(n)：选中同级别中同类型的第n个标签
nth-last-of-type(n)：选中同级别中同类型的倒数第n个标签
only-of-type：选中父元素中唯一类型的某个标签

nth-child(odd)：选中同级别中的所有奇数标签
nth-child(even)：选中同级别中的所有偶数标签
nth-of-type(odd)：选中同级别中同类型的奇数标签
nth-of-type(even)：选中同级别中同类型的偶数标签
nth-child(xn+y)：x和y是用户自定义的，n是一个计数器，从 0开始递增

p[id]{
          color: red;
       }

[attribute]：根据指定的属性名称找到对应的标签，然后设置属性
[attribute=value]：找到有指定属性，并且属性的取值等于value的标签，然后设置属性。
最常见的应用场景，就是用于区分input属性

例如：

p[type=password]{
                color: red;
               }

   [attribute|=value]：CSS2
   [attribute^=value]：CSS3
   区别：
CSS2中的只能找到value开头，并且value是被横杠-和其他内容隔开的
CSS3中的只要是以value开头的都可以找到，无论有没有被横杠-隔开

   [attribute$=value]：CSS3

   [attribute~=value]：CSS2
   [attribute*=value]：CSS3
区别：
CSS2中的只能找到独立的单词，也就是包含value，并且value是被空格隔开的
CSS3中只要包含value的都可以

   *{
       color: red;
      }

注意点：
由于通配符选择器是设置界面上所有标签的属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器

 a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的

类选择器 会覆盖 标签选择器

如果是间接选中，那么就是谁离目标标签比较近就听谁的

如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的

  如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠

id>类>标签>通配符>继承>浏览器默认

.bb{
          color: blue;;
          }
        p{
          color: red !important;
          }

 只有选择器是直接选中标签的才需要计算权重

   容器级别的标签中可以嵌套其他所有的标签
   文本级别的标签中只能嵌套文字、超链接、图片

div h ul ol dl li …

   span p buis strong em ins del 

哪些标签是本文级的，哪些标签是容器级的不用刻意去记
在企业开发中一般情况下要嵌套都是嵌套在div中，或者按照组标签来嵌套

   块级元素会独占一行
   行内元素不会独占一行

p  div  h  ul  ol  dl  li …

   span  buis   strong  em  ins  del 

1、独占一行
2、如果没有设置宽度那么默认和父元素一样宽
3、如果设置的宽高，那么就按照设置的来

1、不会独占一行
2、如果没有设置宽度，那么默认和内容一样宽
3、行内元素是不可以设置宽度和高度的

为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素

   设置元素的display属性

   block 块级
   inline 行内
   inline-block 行内块级

   di+tab    display:inline;
   db+tab   display:block;
   dib+tab   display:inline-block;

在CSS中有一个background-color:;属性，就是专门用来设置标签的背景颜色的

快捷键：bc+tab

在CSS中有一个叫做background-image: url();属性,就是转么用于设置背景图片 

快捷键：bi+tab

   在CSS中有一个background-repeat属性，就是专门用于控制背景图片的平铺方式的

repeat：  默认，在水平和垂直都需要平铺
no-repeat：在水平和垂直都不需要平铺
repeat-x： 只在水平方向平铺
repeat-y： 只在垂直方向平铺

 bgr+tab

CSS中有一个叫做background-position: 0 0;属性，就是专门用于控制背景图片的位置

background-position: 水平方向 垂直方向;

   水平方向：left  center  right
   垂直方向：top  center  bottom

   例如：100px 

1、一定要写单位px
2、x越往右越大，y越往下越大
3、可以接受负数

bp+tab

background:背景颜色 背景图片 平铺方式 关联方式 定位方式;

bg+tab

background属性中，任何一个属性都可以被省略

background-attachment:scroll;

 scroll  默认值，会随着滚动条的滚动而滚动
 fixed   不会随着滚动条的滚动而滚动

ba+tab

注意点：
仅做了解，企业开发中用得不多

div.box$*n    
就会生成n个div，且box从1到n

div class="box1"></div>
<style>
div{
    width: 86px;
    height: 28px;
    background-image: url(images/weibo.png);
    background-position: -425px -200px;
}
</style>
精灵图1 精灵图2 
border: 边框宽度 边框样式 边框颜色;
例如：
border: 1px solid #000;

 * 快捷键：

      bd + tab

 * 边框样式的取值非要记住的只有两个：

dashed（虚线）
solid（实线）

 * 注意点：

1.连写格式中颜色属性可以省略，省略之后默认是黑色
2.连写格式中样式不可省略，省略之后就看不到边框了
3.连写格式中宽度可以省略，省略之后可以看到边框

border-top: 边框宽度 边框样式 边框颜色;
border-right: 边框宽度 边框样式 边框颜色;
border-bottom: 边框宽度 边框样式 边框颜色;
border-left: 边框宽度 边框样式 边框颜色;

 * 快捷键：

bt+
br+
bb+
bl+

border-width:上 右 下 左;  
border-style:上 右 下 左;
border-color:上 右 下 左;

 * 注意点：
   * 这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值，而不是按照日常中的上下左右
   * 这三个属性的取值省略时的规律：

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

 * 非连写（企业开发中几乎不用）

例如：
border-top-width:;
border-top-style:;
border-top-color: #000;

padding-top:像素;
padding-right:像素;
padding-bottom:像素;
padding-left:像素;

      padding:上 右 下 左;

这三个属性的取值省略时的规律

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

margin-top:;
margin-top:;
margin-top:;
margin-top:;

margin-top:上 右 下 左;

这三个属性的取值省略时的规律

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

宽度/高度：指定可以存放内容的区域
边框：
内边距：
外边距：

   就是通过标签的width/height属性设置的宽度和高度

   宽度=左边框+左内边距+width+右内边距+右边框
   高度=同理可证

   宽度=左外边距+元素宽度+右外边距
   高度=同理可证

content-box
       元素的宽高=边框+内边距+内容宽高
 border-box
       元素的宽高=width/height

设置盒子中存储的文字/图片的水平居中

让盒子自己水平居中

*{
         margin: 0;
         padding: 0;
        }

  通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好
  所以，百度搜yui css reset ，第一个，进去打开网址复制
    http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

   line-height:;

垂直排版：如果元素是块级元素，那么就会垂直排版
水平排版：如果元素是行内元素/行内块级元素，那么就会水平排版

float: left;
float: right;

   1.浮动流中没有居中对齐，也就是没有center这个取值
   2.在浮动流中是不可以使用margin:0  auto;的

   1.在浮动流中是不区分块级元素、行内元素、行内块级元素的，无论是块级元素、行内元素、行内块级元素都是水平排版
   2.在浮动流中无论是块级元素、行内元素、行内块级元素都可以设置宽高
   3.综上所述，浮动流中的元素和标准流中的行内块级元素很像

给前面一个父元素设置高度

 给后面的盒子添加clear属性

none：默认取值，按照浮动元素的排序规则来排序（）
left：不要找前面的左浮动元素，不要和前面的左浮动同一行
right：不要找前面的右浮动元素，不要和前面的右浮动同一行
both：不要找前面的左浮动元素和右浮动元素（用得最多）

隔墙法

1、在两个盒子之间添加一个额外的块级块级元素
2、给这个额外添加的块级元素设置clear:both;属性

1、在第一个盒子中所有子元素的最后添加一个额外的块级块级元素
2、给这个额外添加的块级元素设置clear:both;属性

外墙法可以让第二个盒子使用margin-top属性
外墙法也可以让第一个盒子使用margin-bottom属性

div::before{
                  属性:值;
                  }
含义：给指定标签的内容前面添加一个子元素

div::after{
                  属性:值;
                 }                
含义：给指定标签的内容后面添加一个子元素

例如：

div::before{
    /*指定添加的子元素的内容*/
    content:"爱你";
    /*指定添加的子元素的宽高*/
    width: 50px;
    height: 50px;
    background-color: pink;
    /*指定添加的子元素的显示模式*/
    display: block;
    /*隐藏添加的子元素*/
    visibility: hidden;
                }

div::after{
    /*设置添加的子元素的内容为空*/
    content:"";
    /*设置添加的子元素为块级元素*/
    display: block;
    /*设置添加的子元素的高度为0*/
    height: 0;
    /*设置添加的子元素看不见*/
    visibility: hidden;
    /*给添加的子元素设置clear:both;*/
    clear: both;

因为此方法是CSS3推出的，IE6不支持
需要在CSS里面添加以下内容，就能兼容IE6（box1为第一个盒子的类名）

.box1{
            *zoom: 1;
            }

注：

因为此方法是CSS3推出的，IE6不支持
需要在CSS里面添加以下内容，就能兼容IE6（box1为第一个盒子的类名）
.box1{
            *zoom: 1;
            }

相对定位
 绝对定位
 固定定位
静态定位

.box2{
    background-color: green;
    position: relative;
    top:;
    right:;
    bottom:;
    left:;
          }

就是相对于body来定位

.box2{
    background-color: green;
    position: absolute;
    top:;
    right:;
    bottom:;
    left:;
}

1、只要是这个绝对定位元素的祖先元素都可以
2、这里指的定位流是指 绝对定位、相对定位、固定定位
3、定位流中只有静态定位不行

相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面

默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器宽度高度的变化而变化

子元素使用绝对定位，父元素使用相对定位

margin：0 auto；在绝对定位中无效

如何让绝对定位的元素水平居中（加下面2行代码）

只需要设置绝对定位元素的 left：50%；
然后在设置绝对定位元素的 margin-left：-元素宽度的一半px；

position: fixed;
left:;
top:;
right:;
bottom:;

a、IE6不支持固定定位
b、默认情况下就静态定位

   1.默认情况下，定位流的元素会盖住标准流的元素
   2.默认情况下，定位流的元素，后面编写的会盖住前面编写的
   3.如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面

a:link{
    color: skyblue;
}
修改从未被访问过状态下的样式

a:visited{
    color: green;
}
修改被访问过的状态下的样式

a:hover{
    color: black;
}
修改鼠标悬停在a标签上的样式

a:active{
    color: pink;
}
修改鼠标长按状态下的样式

a{
    color: skyblue;
}
上一篇 下一篇

猜你喜欢

热点阅读