CSS概念基础入门学习笔记

学了半个月HTML之后，终于开始接触CSS了。

学HTML的时候被老师无数次提及CSS这玩意。感觉这玩意简直万能。

“这个不用太了解，以后学了CSS能弄”

“这个用CSS做的，现阶段我们先不讲”

“你们先用table做，等我们学了CSS...”

“现如今最流行的布局是DIV+CSS...”

“...”

反正就是这样，盼星星盼月亮终于开始学CSS了。

好吧，下面正式开始做笔记

div+css布局的优势:

table布局：

        优点：布局容易、快捷、兼容性好

        缺点：改动不变、代码冗余、浏览器加载速度变慢、对搜多引擎不友好

div+css：

        优点：布局灵活、改动方便

        缺点：需要考虑平台的兼容性、对制作人员技能要求较高

无语义标签：

div标签：默认宽度充满整行

span标签：默认宽度跟随文字的变化而变化

CSS概念：

Cascading Style Sheets

是一种用来表现html或xml的页面显示样式的计算机语言，改变可视化标签的样式，做视觉效果相关的东西，美化页面的作用

层叠样式表：

html标记是有层级结构的

*同一个标签有可能被多个样式表同时层叠的设置样式属性

*层叠样式表是有优先级的

作用：美化页面

概念

语法

style标签（非可视化标签）

        type是style的类型属性，text/css是它的值，告诉浏览器这里面的文本内容是当做层叠样式表

注意：style标签写在head标签之间

颜色值

单词

调色：

rgb：r(red)红色 g(green)绿色 b(blue)蓝色

        rgb(0~255，0~255，0~255)

       比如：红色 rgb(255,0,0)

十六进制：#00~ff 00~ff 00~ff

       比如：红色 #ff0000  简写：#f00

rgba：相当于rgb+a[透明度[

       比如：rgba(255,210,0,0~1)

字体

font-size：字体大小

font-family：字体

font-style：字体样式（normal默认值，italic斜体，oblique倾斜，inhert继承）

font-variant：以小型大写字体或者正常字体显示文本（normal默认值，small-caps小型大写，inhert继承）

font-weight：字体粗细（normal默认值，100~900整百，bord粗体，border更粗，lighter更细，inhert继承)

font：连写（例： font: 700 italic 39px "宋体"）

文本

color：文本颜色

direction：文本方向（ltr从左到右，rtl从右到左，inhert继承）

text-align：对齐元素中的文本（left左，right右，center中，justify两端，inhert继承）

text-decoration：添加修饰（none默认，underline下划线，overline上划线，line-through删除线，blink闪烁，inhert继承）

text-transform：控制元素中的字母（none默认，capitalize大写开头，uppercase仅大写，lowercase仅小写，inherit继承）

unicode-bidi：设置返回文本是否被重写（normal默认，embed嵌套，bidi-override覆盖）

vertical-align：设置元素的垂直对齐（baseline默认，sub下标，super上标，top顶端，text-top父顶端，middle父中部，bottom低顶端，text-bottom父底端，length，%百分比，inherit继承）

white-spaceb：设置元素中空白的处理方式（normal默认，pre保留，nowrap不换行，pre-wrap保留空白,正常换行，pre-line合并空白，inherit继承）

text-indent：首行缩进

line-height：行间距

word-spacing：单词间距

letter-spacing：字符间距

text-shadow：阴影（左右 上下 颜色)

图片背景

background-color  指定要使用的背景颜色    

background-position  指定背景图像的位置（值：例：top center;或10% 10%;或10px 10px）

background-size  指定背景图片的大小（值：cover覆盖，contain扩展）

background-repeat  指定如何重复背景图像（值：repeat-x水平，repeat-y垂直，no-repeat不重复）

background-origin  指定背景图像的定位区域 （值：padding-box内边距框，border-box边框盒，content-box内容框）

background-clip  指定背景图像的绘画区域（值：padding-box内边距框，border-box边框盒，content-box内容框）

background-attachment  设置背景图像是否固定或者随着页面的其余部分滚动（值：scroll默认，fixed不懂，inherit继承）

background-image: url("#");  指定要使用的一个或多个背景图像

css三大特性：

覆盖：同标签选择器时，最下面的样式属性会覆盖上面的样式属性

优先级：!important>ID选择器>类选择器>标签选择器>通配符

继承：子元素会继承父元素相关样式，宽高不继承

（cs根据权重决定页面显示何种样式）

CSS整体重点：

选择器 

selector：选择目标

标签选择器

标签名{属性名：属性值；}

         针对该页面所有的对应的标签，都会受到样式表的影响

class选择器（建议）

.class名{属性名：属性值；}

         任何可视化标签元素都可以有class属性，默认没有

         一个class属性可以有多个值、多个classa样式（用空格分开）

id选择器（identity 唯一标识）

#id名{属性名：属性值；}

         任何标签元素都可以有id属性

         如果设置id属性，一定要保证这个属性的值整个页面是唯一的

后代选择器

         空格分隔

         通过多个选择器空格组合的方式（强烈推荐）

组合选择器（并集选择期）

         逗号分隔

命名规范：是由字母数字和横岗组成（半角），例子：head-logo

优先级：id选择器>class选择器>标签选择器

选择器描述的尽量详细一点

元素样式来源

系统自带的样式

不同的标签，根据标签名字的不一样，浏览器给了默认的样式）

外部链接的样式

1、使用link标签href引用，放在head之间。后缀名.css

rel属性必须是stylesheet href代表css的位置

2、使用@import url("地址")；（放入style标签内）

内部链接的样式

style标签

优点：方便在页面修改样式

缺点：不利于共享、结构和样式分离不够彻底

内嵌的样式（行内样式）

style="属性名:属性值;属性名:属性值;"

所有可视化标签都可以有style属性，但不建议使用，维护成本高

link标签

引入外联资源

         css：

         ico：

                         height: 0;

                         line-height: 0;

                         display: block;

                         clear: both;

                         visibility: hidden;

                         }

 伪元素&伪类  

伪类：用于像元素添加特殊效果

       a:link、a:hover、a:active、a:visited

       :link“链接”：超链接点击之前（a标签专用）

       :visited“访问过的”：链接呗访问过之后（a标签专用）

       :hover“悬停”：鼠标放到标签上的时候

       :active“激活”：鼠标点击标签，但是不松手时

       :focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）

       例：a:link{color:red;}

              a:visited{colororange}

              a:hover{color:green;}

              a:active{color:black;}`

              div:hover p{display:block;}

伪元素：在页面上不存在的元素，可以通过伪元素添加上去

      例： p:before{content: "H";}（在p标签前面加H）

              p:after{content:"d";}

       元素的隐藏：

              display:none;（隐藏，不占位置）

              overflow:hidden;（将超出部分裁剪）

              visibility:hidden;（隐藏，但是原页面还保留位置）

 

定位

清楚默认margin/padding值：

        1、*{padding:0px;margin:0px}

        2、body,p,h1...{padding:0px;margin:0px}

解决页面上盒子与盒子之间的层叠问题

相对定位、绝对定位、规定定位、静态定位

问题：在页面上有两个盒子，其中第二个盒子将第一个盒子压了一半

           清除默认的margin\padding值

1、static（静态的）

       position:static;静态定位

       所有标准流中的元素都是静态定位（默认）

2、relative（相对的）

       position:relative;相对定位

       使用的时候要配合：top、left、right、bottom

       特点：如果设置了相对定位并且设置了tlrb属性，那么将来盒子会相对于自己原本的位置发生偏移

       1.相对于原来位置进行平移

       2.设置了相对定位的元素在页面上占据了位置（没有脱离标准文档流）

       总结：想当年

3、absolute（绝对的）

       position:absolute;绝对定位

       使用的时候要配合：top、left、right、bottom

       1、如果这个元素没有父元素，将来tlrb时相对于body来定位的。

       2、如果这个元素有父元素，但是父元素没有定位，那么这个时候tlrb还是相对于body定位的。

       3、如果这个元素有父元素，并且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础的。

       4、绝对定位以后的元素在页面不会占据位置。

       总结：看脸

 

       注意：如果小盒子要在大盒子里定位，并且水平居中靠下对齐，先left:50%，再margin：-小盒子宽度一半

       重点：将来用的最多的是绝对+相对一起

       规范：子绝父相（子元素使用绝对定位，父元素使用相对定位）

4、fixed：固定定位

       position:fixed;固定定位

       使用的时候要配合：top、left、right、bottom

       特点：

       1、不管页面多大，tlrb都是相对于浏览器的边框

       2、固定元素脱离了标准流，不占标准流的位置

       总结：死心眼

z-index显示在哪一层（置顶层显示）

 

布局

标准文档流、浮动布局、定位布局、table

常见布局

见另一篇文章：CSS基本页面布局布局方式

https://blog.csdn.net/weixin_42588379/article/details/81668014

居中：水平居中、垂直居中

       水平居中

              1、inline-block和text-align实现

                   .parent{text-align:center}

                   .child{display:inline-block}

              2、margin:0 auto（块级）

                   .child{width:200px;margin:0 auto}

              3、table实现

                   .child{display:table;margin:0 auto}

              4、绝对定位

                   .parent{position:relative;}

                   .child{position:absolute;left:50%;margin-left:-(child的一b半宽)}

       垂直居中

              vertical-align

                     针对inline或者inline-block才有效果

              绝对定位

                   .parent{position:relative;}

                   .child{position:absolute;top:50%;margin-top:-(child的一b半高)}

开发流程

       1、设计师设计出来图片

       2、确实网站的结构

              wx：凡是与wx相关的文件都放在wx这个文件夹里       

              css：所有的css文件都放在这个文件夹里

              js：所有的js文件都放在这个文件夹里

             images/image：存放所有的图片

       3、决定页面的开放方式

              从上到下依次编写（符合认知）

              从模块化的角度来分析（适合有经验的开发人员）

CSS初始化

      指定编码：@charset "utf-8";

      CSS文件压缩：响应速度快

      /*1、清楚标签的margin和padding*/

            html,body,ul,li,p,h1,h2,h3,h4,h5,h6,form,img{margin:0;padding:0}

      /*2、清除img的边框*/

            img{border:0}

      /*3、清除li标签之前的小圆点*/

            ul{list-style-type:none}

      /*4、给页面设置一个统一的字体大小和颜色，还要设置body的背景颜色*/

            body{font:12px;color:#433;font-family:"宋体"background:#fff}

      /*5、清浮动*/

            .clearfix:after{content: "";height: 0;line-height: 0;display: block;clear: both;visibility: hidden;}.clarfix{zoom:1}

      /*6、a标签设置颜色，去掉下划线，以及a:hover*/

            a{color:#333;text-decoration:none}

            a:hover{color:#777}

      /*7、设置浮动*/

            .fl{float:left}

            .fr{float:right}

添加地址栏小图标

通栏：默认占浏览器一整行

版心：页面中用来展示内容的固定宽

  背景图一般为1px宽 repeat-x 铺满

  border-radius边框的圆角

  transparent透明色

精灵图（sprite）

what?

就是将页面上一些较小的图片放在一张大图上面，也叫雪碧图、雪碧技术。css sprite

why?

减少图片请求次数，减轻服务器压力

how to use?

一张大图上面有很多小图，怎样将小图拿出来？

1、如果我们需要的图在精灵图上，必须了解这个图片的大小，以及在精灵图上的位置

2、容器的大小和要显示的图的大小一样

3、将精灵图设置为容器的背景，并且根据图片所在位置进行平移

how to make?

1、必须是一些小图片

2、多个小图之间一定要留有一定的间隙

3、精灵图的大小一定要大于所有图中最大的那个，方便将来添加其他图

4、一个像素的背景图不要放在精灵图上面

滚动条样式

只适用于webkit核心浏览器

::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。

::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。

::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

例：

.class::-webkit-scrollbar{width: 8px;height: 20px;}

.class::-webkit-scrollbar-thumb{background-color: #C0BEBC;border-radius: 5px;}

.class::-webkit-scrollbar{display: none;}

其他：

opacity透明度

cursor鼠标样式

       cursor: pointer;鼠标样式（可点击的）[扩展，取值很多]

max-width;最大宽度

min-width;最小的宽度

max-height;最大高度

min-height;最小高度

outline; 设置轮廓(none隐藏)[类似border，取值方式一样]

resize: none;隐藏多行文本框标识

标准盒子模型：width和height指的是内容区域的宽高

        box-sizing: content-box;/*标准盒子模型*/

IE盒子模型：width和height指的是内容区域+border+padding的宽高

        box-sizing: border-box;/*ie盒子模型*/