超简单的CSS基础

Coder_R
387 阅读3分钟

一、CSS基础认识

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 二、基础选择器

image.png

image.png 给相同标签添加css 标签选择器：以标签名命名的选择器
选中所有的这个标签都生效css

image.png

image.png

image.png

image.png 可以给相同标签中 部分标签添加css
类：定义+使用 才生效
一个标签可以使用多个类名 需要空格隔开即可 image.png

image.png

image.png

image.png

image.png

image.png

image.png 三、字体和文本样式

image.png

image.png style中选择器+{ } 添加css

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 图片标签只能设置图片的尺寸，图片其他css样式在其父标签中设置
div用来网页布局，一个页面用无数次，原则：如果使用div，尽量使用类名控制样式

image.png

image.png div标签样式干净，p/h标签有默认行高

四、Chrome调试工具

image.png 网页中 “删除线”是未生效代码，“黄色！”是错误代码
可以在网页中按键盘“上下键”调字体大小、行高等
在网页中按“tab键”增加代码

image.png

五、 选择器：找标签 image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png html快速代码写法 image.png css快速代码写法：单词首字母

image.png 六、背景相关属性 image.png

image.png

image.png

image.png image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

七、元素选择模式

“<>”：标签、标记、元素 image.png

image.png

image.png

image.png

image.png

image.png

image.png image.png

image.png

image.png 块

image.png 行内

image.png 行内块

image.png

image.png 八、css三大特性

image.png

image.png

image.png

image.png

image.png

image.png

综合案例-导航 image.png 给多行加同样内容 快捷方式：alt+shift+鼠标左键单击

image.png

案例2：五彩导航
点到相应模块会变背景色

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

设计师用ps做的设计生成的psd图片，用开发测量

image.png

九、盒子模型

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

border和padding会撑大盒子，像素值为0时 单位可以省略。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

开发网页要清除默认的内外边距！

版心居中

image.png

image.png

image.png

image.png

image.png

image.png 行内标签：内外边距margin和padding 只对左右边距生效，对上下不生效！
要对行内标签加上下边距 使用行高！

image.png

十、浮动

image.png

image.png

image.png

image.png

image.png

image.png

伪元素：css创建的标签，装饰性的不重要的小图
找父级，在这个父级里面创建了子级标签

image.png

image.png

image.png

image.png

image.png

image.png

image.png

浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离。
浮动的作用：添加浮动后 会去除“标签换行书写会产生一个空格的距离”这种情况。

image.png

image.png

image.png

image.png

image.png

浮动盒子覆盖标准流盒子，但不会覆盖文字。

image.png

image.png

image.png

重点！！！css书写顺序！

image.png

image.png

image.png

image.png

image.png

image.png

image.png

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，从而移动显示到上面的位置。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

十一、学成在线项目

image.png

image.png

重点！！！

image.png 网页logo图片一般是超链接，h1>a>img
纯文字可以不设置宽度，文字能撑开宽。

image.png

十二、定位装饰

image.png

image.png

image.png

image.png

image.png 如果left和right都有，以left为准; top和bottom都有以top为准 ！！！
水平只写一个，垂直只写一个

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

浏览器把行内和行内块标签当做文字处理，默认基线对齐!!!

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 十三、小兔鲜项目

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 遇到图字不在一条线居中的情况下，解决办法：浮动、行高、定位

image.png li标签脱标，加类名clearfix!如上图，li出现缩进情况，找和li接近的部分找问题，一般是上部分的高比较大。

image.png 代码一样，css样式一样，可以使用并集选择器

avatar
文章
阅读
粉丝