css基础（初级篇）

最新推荐文章于 2021-08-04 02:12:06 发布

yufeng_go

最新推荐文章于 2021-08-04 02:12:06 发布

阅读量116

点赞数

文章标签： css

本文链接：https://blog.csdn.net/yufeng_go/article/details/119081525

版权

CSS文件嵌入：

CSS长度单位：

1：px（像素）；

2：em（14px的倍数，一般用于文字的大小）；

选择器：*代表所有标签

依次优先级：先内联style选择器，再id选择器，再class选择器，再标签选择器。

常用选择器：标签选择器，class选择器（.）,id选择器（#）,内联style选择器，

关联选择器（#div1 #div1_1{样式}），组合选择器（#div1 #div1_1,#div2 #div1_1{样式}）。

基本选择器：

语法：标签:first-child{样式 }

first-child：第一个标签

first-letter:第一个字符

first-line:第一行

last-child:最后一个标签

nth-child(n)：第n个标签

层级选择器：

#div1 img:div1下面的所有img

#div1>img:div1子类的所有img

#div1+img:div1兄弟类的第一个img

#div1~img:div1兄弟类的所有img（~是波浪号，不是减号）

伪类选择器（同时使用时，按顺序写：从上往下，先：link，在visitesd）：

语法：标签:link{样式}

link:未访问链接

visited已访问链接

hover:鼠标移动到链接上

active:鼠标点击时

focus:获得焦点的input时

selection:被选择时

属性选择器：

标签[属性]：

标签[属性^=n]：以n开头的

标签[属性$=n ]：以n结尾的

标签[属性*=n]：包含n的

Position(定位)：

语法:position:static;

static:是position的默认值。即设置没有定位。

fixed:浏览器窗口固定位置，鼠标上下滑动，浏览器窗口位置不改变

relative:脱离文档流，相对定位，坐标在自己原先的左上角，空间不释放

absolute:脱离文档流，绝对定位，坐标在浏览器的左上角，空间释放。当父类使用relative定位，子类的坐标初始为父类而不是浏览器。

建议：当需要使用position的定位时，请在父类使用relative，在子类使用absolute。

sticky:在relative和fixed之间转换，先是relative效果，后因鼠标上下滑动而转换成fixed效果。

z-index: 定位高度，默认为0。当有重叠情况时，可通过z-index对它们设置显示和隐藏。

font(字体)：

语法：font-family:微软雅黑

family: 设置字体类型

size: 设置字体大小

style: italic(斜体) 设置字体是否为斜体

weight: bold(粗体) 设置字体粗细

@font-face{ 自定义字体类型写在css样式里面

font-family:张骏雄(自定义字体名称);

src:url(‘字体路径’);

}

使用自定义字体：font-family:张骏雄

文本:

letter-spacing:字间距

word-spacing:单词间距

text-decoration: 设置划线。下划线：underline上划线：overline中划线:line-through

text-align: 设置文字位置。居中center 左left 右right

text-indent:npx 设置段落开头缩进npx。

line-height:设置行高

color:设置文字颜色

word-break:break-all折行( 当文字内容大于宽度，则自动换行)。

text-shadow:0px(左右平移,可为负) 0px(上下平移, 可为负) 0px(透明度, 不可为负) red(颜色值) 设置文字阴影

background(背景)：

语法：bagckground-color:颜色值

color:颜色值设置背景颜色

image:url(‘路径’) 设置背景图片

repeat:no-repeat(图片不重复)

attachment:fixd(固定) scroll(滚动) 设置背景图片是否跟滚动条固定或滚动

position:宽值高值设置背景图片显示位置(可为负)

border(边框)：

border:1px solid red 设置边框大小，实虚线(实线：solid 虚线：dotted)，颜色。

border-left: 1px solid red 设置左边线

border-top: 1px solid red 设置上边线

border-right: 1px solid red 设置右边线

border-bottom: 1px solid red 设置下边线

border-image:url(路径) 30 30 round（简写，建议简写）设置边框背景图（记得提前设置边框大小）

border-image:url(路径) 0 0 0 0 round 0代表边框不显示，分别为左上右下四条边

border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。合并写法没使用这个值
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。