CSS 基础（新手友好）

不掉马甲的NPC
246 阅读9分钟

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

CSS 概念

首先，什么是CSS？cascading style sheets    汉译层叠样式表，WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。

通俗易懂的说，页面好不好看都由CSS来决定，CSS的学习我们可以按照进阶的步调来走

使用步骤

第一步：怎么创建CSS？CSS样式表创建的3种方式？

答：

  1. 内部样式 ：通过<style></style>标签进行创建，编写在html页面的head当中
  2. 外部样式： 创建 css 文件，通过<link rel="stylesheet" type="text/css" href="main.css" /> 进行引入，当然还有第二种引入的方式@import url(main.css)  ,那么问题来了，我们该使用哪一个呢？以后更推荐link引入的方式，因为import的方式低版本浏览器不支持，而且在 JS 操作中，无法对它进行操作
  3. 内联（行内）样式：这个就比较亲民了，写法也很 easy 直接在标签内部添加style即可。<p style="" ></p>

总结：以后实际开发中，更推荐的方式是外部样式 。 那么优先级呢？最高的是 内联样式-》内部/外部 看具体的书写顺序

第二步：知道 CSS 写在哪了，那具体的 CSS 要怎么写呢？

答：1. CSS 语法： 选择符{  属性：属性值；属性：属性值；  } 注意分号不可丢

CSS 选择符(选择器)

选择符的目的就是为了帮助我们找到页面上面的元素

  1. ID 选择器：在 html 中给标签添加 ID ，在 CSS 中通过  #ID 名{  }  即可找到这个元素。注意#不可改,id不要重复（常用）

  2. Class 选择符：在标签中添加 class，css 文件中通过 .class名称{  } ，可以多个标签都用同一个class，当然一个标签也能用多个 class 通过空格分隔（常用）

  3. 通配符：* 一个星号，有了它页面上所有的标签都会生效这个样式，它一般用来设置字体字号的

  4. 标签选择器：html 的标签名拿过来直接就是了，例如：p{  }  当然你这样写完之后，你页面上所有的p标签都会应用这个样式（常用）

  5.  群组选择符：单个样式已经不能够阻挡你了，那么多个怎么写呢，很简单，通过逗号分隔就OK ，例如：p,a,div{  } .div1,.p1,.a1{ }（常用）

  6. 后代选择符：当你想找到一个元素下的孩子们的时候，你会想到这个选择符，它的用法只需中间加一个空格，例如：div a{  } 这句的意思就是 div 下面所有的a都会应用你写的这个 CSS 样式，注意：空格不可少（常用）

  7. 子元素选择符：写法 div > a{  } 和后代的区别呢，很简单，子元素在家谱来说，就是只找到自己的孩子，孙子很明显不归它管

  8. 相邻兄弟选择器：div + a {  } 和div 同级的a标签会生效样式，但是要求是必须是睡在上铺的兄弟，对面铺的都不行，必须要挨着div才行

  9. 后续兄弟选择器：div~a{ } 这个只要是同级的都可以找到

选择符的优先级

CSS 选择符有权重，如下：

  • css中用四位数字表示权重，权重的表达方式如：0，0，0，0
  • 类型选择符的权重为0001
  • class选择符的权重为0010
  • id选择符的权重为0100
  • 子选择符的权重为0000
  • 属性选择符的权重为0010
  • 伪类选择符的权重为0010
  • 伪元素选择符的权重为0010
  • 包含选择符的权重：为包含选择符的权重之和
  • 内联样式的权重为1000
  • 继承样式的权重为0000

从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

还有一点，CSS 选择符的权重，是计算的，比如你写了一个 ID 选择器和标签选择器，那么它的权重是把两个相加得到的结果

终于到了开始正式写CSS的地方了 噗 那上面都是什么，都是一群铺垫

CSS 基础

文本相关的样式

  1. 文字大小 font-size   单位是px/em  注意；一般情况下PS量取字体的时候都是偶数

  2. 文字颜色 color 有三种方式写颜色 red 单词  #ccccc 16进制的方式 rgb(255,255,1)

  3. 字体 font-family 可以设置多个字体，逗号分隔，生效是看用户电脑上安装的字体，注意写字体加引号

  4. 加粗：{font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900; but 600-900才能看出了加粗的效果

  5. 倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;but 倾斜度小or大并看不出来

  6. 水平对齐方式 text-align:left/right/center

  7. 行高 { line-height:normal/value; } 行高小技巧，把行高和高度设置一样的，可以让元素内的内容垂直居中

  8. 文本修饰：text-decoration:none/underline/overline/line-through 说明：

  • none:没有修饰
  • underline:添加下划线
  • overline:添加上划线
  • line-through:添加删除线
  1. 都是font开头的，font的简写版： 说明:font的属性值应按以下次序书写(各个属性之间用空格隔开) 顺序: font-style | font-weight | font-size / line-height | font-family 例如：font:bold italic 30px "微软雅黑"

10.首行缩进：{text-indent:value;} 那么值该是多少呢？如果你的字体大小是12px，想空两个格，那么就text-indent:24px; 当然你也发现了这样计算好烦，虽然并没有超过100，还有一种更简单的方式，换个单位，em ，1em=16px=100% 如果想空两个字，直接写text-indent:2em; 呦嚯嚯~

11.字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和汉字）

  1. 词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距,）对中文不起效果

列表相关样式

  1. 定义列表符号样式：list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

  2. 定义列表符号的位置：list-style-position:outside(外边)/inside(里边)；

  3. 使用图片作为列表符号：list-style-image：url(所使用图片的路径及全称)；

背景相关样式

  1. 背景颜色 语法：选择符{background-color:颜色值;}

  2. 背景图片的设置  语法：background-image：url(背景图片的路径及全称)；

了解下目前的图片格式撒：

  • jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
  • gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
  • png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是 fireworks的 源文件格式，适用于颜色数量较少的图像;
  • WebP 在各大互联网公司已经使用得很多了 WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。但 WebP 是一种有损压缩。相较编码 JPEG 文件，编码同样质量的WebP文件需要占用更多的计算资源。  
  1. 背景图片平铺属性 语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

4.背景图的固定 语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}

5.背景图片的位置 语法：选择符{background-position:left/center/right/数值     top/center/bottom/数值;}

两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。 当两个值都是 center 的时候写一个值就可以代表的是水平位置和垂直位置。 说明：向右方向，向下方向是负值

  1. 背景属性缩写：background:属性值1   属性值2   属性值3；background:url（背景图片的路径及全称） no-repeat center top；

background 的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position

背景还有一个很重要的应用场景就是：雪碧图

background-position属性使用频率非常高，大量的网站为了减少 http 请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position 属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性。

CSS3新增内容

  1. 属性选择器：语法 [att*=val] 属性值包含 val 例：[class*=“div” ]  意思是 class 属性包含 div 字符 语法 [att^=val] 属性值以 val 开始 例：[class^=“div” ]  意思是 class 属性以 div 开头 语法 [att=val]‘属性值以val结尾例：‘[class=val]` 属性值以 val 结尾 例：`[class=“div” ] ` 意思是 class 属性以 div 结束

  2. 伪类选择器：

  • 找到第一个 li:first-child{  }
  • 找到最后一个 li:last-child{  }
  • 找到同级下的第 n 个 li:nth-child(n){  }
  • 反向找到第 n 个 li:nth-last-child{  }
  • 找到偶数 li:nth-child(even){  }
  • 找到奇数 li:nth-child(odd){  }
  1. 伪元素选择器：
  • 像选择元素的第一行文字使用样式 p:first-line {   }
  • 像选择元素的第一个字符使用样式 p:first-letter {   }
  • 在选择元素的之前添加新元素 p:before{   }
  • 在选择元素的之后添加新元素 p:after{   }

总结一下：以上是一些基础的简单的 CSS 样式和我们 CSS 选择器，有了这些选择器可以帮助我们更好的去找到页面上的元素，通过这些我们可以简单的去还原一些小的效果，怎么样是不是感觉好复杂，人生就是这样起起落落落落落落落落落落...别担心，反正我也帮不了你

avatar
文章
阅读
粉丝