WEB前端之HTML+CSS基础精选分享
导读： 首先，什么是CSS？cascading style sheets汉译层叠样式表，WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。 通俗易懂的说，页面好不好看都由C...
首先，什么是CSS？cascading style sheets汉译层叠样式表，WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
通俗易懂的说，页面好不好看都由CSS来决定，CSS的学习我们可以按照进阶的步调来走
第一步：怎么创建CSS？CSS样式表创建的3种方式？
答：1. 内部样式 ：通过标签进行创建，编写在html页面的head当中
2. 外部样式： 创建css文件，通过 进行引入，当然还有第二种引入的方式@import url(main.css) ?,那么问题来了，我们该使用哪一个呢？以后更推荐link引入的方式，因为import的方式低版本浏览器不支持，而且在JS操作中，无法对它进行操作
3. 内联（行内）样式：这个就比较亲民了，写法也很easy直接在标签内部添加style即可。
总结：以后实际开发中，更推荐的方式是外部样式 。 那么优先级呢？最高的是 内联样式-》内部/外部 看具体的书写顺序
第二步：知道CSS写在哪了，那具体的CSS要怎么写呢？
答：1. CSS语法： 选择符{
?属性：属性值；属性：属性值； ?}
注意分号不可丢
第三步：选择符是什么？有哪些呢？
答：1. 选择符的目的就是为了帮助我们找到页面上面的元素
2. ID选择器：在html中给标签添加ID ，在CSS中通过 ?#ID名{
?}
?即可找到这个元素。注意#不可改,id不要重复（常用）
3. Class选择符：在标签中添加class，css文件中通过 .class名称{
? }
，可以多个标签都用同一个class，当然一个标签也能用多个class 通过空格分隔（常用）
4. 通配符：* 一个星号，有了它页面上所有的标签都会生效这个样式，它一般用来设置字体字号的
5. 标签选择器：html的标签名拿过来直接就是了，例如：p{
? }
? 当然你这样写完之后，你页面上所有的p标签都会应用这个样式（常用）
6.? 群组选择符：单个样式已经不能够阻挡你了，那么多个怎么写呢，很简单，通过逗号分隔就OK ，例如：p,a,div{
? }
.div1,.p1,.a1{
}
（常用）
7. 后代选择符：当你想找到一个元素下的孩子们的时候，你会想到这个选择符，它的用法只需中间加一个空格，例如：div a{
? }
这句的意思就是div下面所有的a都会应用你写的这个CSS样式，注意：空格不可少（常用）
8. 子元素选择符：写法 div >
a{
? }
和后代的区别呢，很简单，子元素在家谱来说，就是只找到自己的孩子，孙子很明显不归它管
9. 相邻兄弟选择器：div + a {
? }
和div同级的a标签会生效样式，但是要求是必须是睡在上铺的兄弟，对面铺的都不行，必须要挨着div才行
10.后续兄弟选择器：div——a{
}
这个只要是同级的都可以找到
第四步：选择符的优先级是个什么顺序？
答：CSS选择符有权重，如下：
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
包含选择符的权重：为包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为0000
从样式选择器看权重优先级：important >
内嵌样式 >
ID >
类 >
标签 | 伪类 | 属性选择 >
伪对象 >
继承 >
通配符。
还有一点，CSS选择符的权重，是计算的，比如你写了一个ID选择器和标签选择器，那么它的权重是把两个相加得到的结果
--------------------终于到了开始正式写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:添加删除线
9. 都是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;
}
控制英文字母和汉字的字距。（英文字母和汉字）
12. 词间距{
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(背景图片的路径及全称)；
了解下目前的图片格式撒：
1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;
(像素点组成的，像素点越多会越清晰 )
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
4)WebP 在各大互联网公司已经使用得很多了 WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
3. 背景图片平铺属性 语法：选择符{
background-repeat:no-repeat/repeat/repeat-x/repeat-y }
4.背景图的固定 语法：选择符{
background-attachment:scroll(滚动)/fixed(固定);
}
5.背景图片的位置 语法：选择符{
background-position:left/center/right/数值?top/center/bottom/数值;
}
两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
说明：向右方向，向下方向是负值
6. 背景属性缩写：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$="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){
? }
3. 伪元素选择器：像选择元素的第一行文字使用样式 p:first-line {
}
像选择元素的第一个字符使用样式 p:first-letter {
}
在选择元素的之前添加新元素 p:before{
}
在选择元素的之后添加新元素 p:after{
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： WEB前端之HTML+CSS基础精选分享
本文地址： https://pptw.com/jishu/661615.html