CSS&CSS3零碎知识点

最新推荐文章于 2023-11-10 10:37:46 发布

miao_599

最新推荐文章于 2023-11-10 10:37:46 发布

阅读量385

点赞数 1

分类专栏： css的tips 文章标签： CSS基础知识选择器分类 css3和css小知识点

本文链接：https://blog.youkuaiyun.com/miao_599/article/details/89424047

版权

css的tips 专栏收录该内容

3 篇文章

订阅专栏

关于CSS的那点儿事！

_{前端看似简单，学起来并不容易，前端发展迅速，一个还没彻底弄懂又发展新的了，于是乎，就特意从基础开始学，这里总结一下关于CSS的，随时补充}

part1

外部样式表插入方式：
<link href="css文档地址" type="text/css" rel="stylesheet" >
字间距：letter-spacing（默认2px）
单词间距：word-spacing
首行缩进：text-indent：2em
CSS3新增文字阴影属性：
text-shadow：水平位置垂直位置模糊像素透明色rgba（0，0，0，0.5）0.5表示程度
块级元素和行内元素区别
· 块级元素：
1）总是从新行开始
2）height,line-height,margin,padding可控
3）宽度默认为容器100%
4）可以容纳内联元素和其他块元素
· 行内元素
1）和相邻行内元素在一行上
2）高宽无效，但水平方向的margin，padding可控
3）默认宽度就是本身内容的宽度
4）行内元素只能容纳文本或其他行内元素
· 行内块元素：<img/> <input/> <td>_{！！可以对他们设置宽，高和对齐属性！！}
1）和相邻行内元素（行内块）在同一行，但之间会有空隙
2）默认宽度是本身内容宽度
3）高，行高，margin，padding都可控
标题下的横线:<hr/>
网上字常用颜色 #3c3c3c，不是正常黑色
font-weight:normal让标题不加粗
CSS复合选择器：
1）交集选择器：标签名.类名
2）并集选择器：p,div,v,h1{ }同时修改这些标签的样式
3）后代选择器：类名.标签名
a标签中title属性表示鼠标悬停样式
属性选择器 (标签内的属性)
a[title=xxx]{}
a[title*=xxx]{}属性名里包含xxx并且在任意位置
a[title^=xxx]{}属性名里包含xxx并且在最开始的位置
a[title$=xxx]{}属性名里包含xxx并且在最结束的位置
类选择器：.demo
伪类选择器：first-child
伪元素选择器：::first-letter 元素::first-line
_{first-line>letter所以letter更优先}
虽然先改变首单词，再改变第一行，但是样式却没覆盖
效果如下：
元素::before/after {content:“添加的内容”}
_{在盒子内部内容的前或后添加内容}
在同一个盒子加多张图片，但若存在覆盖关系，上面图会盖在下层图上
background:url(images/1.jpg) no-repeat left top(默认会在左上角)，
url(…/x.jpg) no-repeat right bottom;
若添加背景色，则背景色在最后图片添加，否则会覆盖
对字体设置格式为font: 300(粗细) 60px(尺寸) “微软雅黑”
当盒子仅有一行文字时，设置行高等于块的高度，则文字水平居中
背景重复background-repeat :repeat(横纵都重复) repeat-x,横向重复 no-repeat 不平铺
背景附着：当文字出现很多，出现滚动条时，默认背景图片是会滚上去的，background-attachment：scroll/fixed建议背景设置的顺序为颜色，图片，重复（平铺）与否？，位置，滚动背景半透明background：rgba(0,0,0,0.7)
插入的图片img 直接用width，height即可若改背景图片则用background-size：100px或者50%（可以设置宽，高但最好只更改一个）
background-size：cover：满足高度和宽度，可自动调整比例，保证图片始终充满背景，如有溢出部分则被隐藏！！用的频率多一点 contain：保证图片完整显示，也是等比例缩放，如果图片高度或者宽有一个和盒子一样大了，就不缩放了，但会有部分背景色露出
border:粗细（border-width:1px）样式(默认是none）颜色
border-collapse：collapse 合并边框
圆角边框：border-radius：10px(圆半径四个角) ；两个值则表示左上和右下，左下和右上；如果设置的是盒子宽高的一半“50%”就会变成圆形
nav标签是H5新增语义标签，表示包围导航栏部分
链接务必要转换为行内块元素，否则链接为行内元素不能设置大小，要让链接字数不同也有相同间隔，则需要不设置width仅仅设置高和padding
外边距实现盒子居中对齐有两个条件：1）块级元素2）已经设置了宽度。margin：随意 auto；