css基础知识

最新推荐文章于 2024-07-16 17:18:30 发布

m0_63297388

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量128

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_63297388/article/details/126219927

版权

css语法格式

选择器〔属性1：值1；属性2：值2}

width：宽
height：高
background-color：背景色

长度单位：

px-＞像素
2.%-＞百分比
外容器 -＞ 600px 当前容器 50% ->300px

注释格式L：/* CSS注释的内容*/

内连样式和内部样式

1．内联样式
style属性
2.内部样式
style标签

区别：
内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理

<div style="width: 10opx;height: 100px;background-color:red”>这是一个块</div>
<div style="width: 10opx;height:10epx;background-color：red”>另外一个块</div>

外部样式

引入一个单独的CSS文件，name .css
1.通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
2.通过@import方式引入外部样式，

两者区别
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用； 1ink 是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加裁顺序区别
加载页面时，2tnx 标签引1入的CSS 被同时加载； @import引1入的CSS 将在页面加载完半后被加载。
3.兼容性区别
@import是CSS2.1 才有的语法，故只可在 IE5+ 才能识别；i1ax 标签作为 HTML 元素，不存在辣容性问题。
4.DOM可空性区别
可以通过 JS 操作 DOM ，插入 link标签来改变样式；由于 DOM 方法是基于文档的，无法使用 B4mpoze 的方式插入样式。
5.权重公别(该项有争议，下文格详解）
link引入的样式权重大于@import引入的样式。

 div{ width: 100px; height:100px; background-color : red}

css颜色表示法

1.单词表示法：red blue green yellow
2.十六进制表示法：#000000
#ffffff
0123456789
01
0123456789abcdef
3.rgb三原色表示法：rgb(255,255,255);
取值范用 0~ 255

Css背景样式

background-color 背景色
background-image 背景图
ur1（背景地址）
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（ x，y都进行平铺，默认值）
no-repeat 都不平铺
background-position：背景位置
x y :number(px、%）｜单词
x：left. center、right
y: top. center, bottom
background-attachment：背景图随滚动条移动的方式
scro11：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照沟览器进行偏移的）

css边框样式
border-style：边框样式
solid：实线
dashed ：虛线
dotted ：点线
border-width：边框大小
px…
border-color：边框颜色
red #f00…
边框也可以针对某一天边进行单独设置：border-left-style：中间是方向 left、right、top、 bottom

Family 字体类型

font-family：字体类型
英文、中文
衬线体、非衬线体
注意点：
1 .名个字体类型的设置目的
2.引号的添加的目的

font-size ：字体大小
默认:16px
写法:number(px）|单词（ small large… 不推荐使用）
font-weight：字体粗细
模式：正常( normal ) 加粗（bold )
写法：单词(normal、bold)| number (100 200…900)

font-style：字体样式
模式：正常（ normal ）斜体（ italic ）
写法：单词（ normal,italic )
注：oblique也是表示斜体，用的比较少，
一般了解即可。

区别：
1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

CSS段落样式

text-decorat ion：文本装饰
下划线：underline
刪除线：1ine-through
上划线：overline
不添加任何装饰：none
注：添加多个文本修饰：line-through underline overline

text-transform：文本大小写（针对英文)

text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同

ext-align：文本对齐方式
对齐方式：left 、right、center、 justify

line-height：定义行高
行高. 一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值：1. number( px ) | scale （比例值，跟文字大小成比例的）

letter-spacing ： 字之间的间距
word-spacing：词之间的间距（针对英文段落的）
英文和数字不自动折行的问题：
1,
• word-break : break-all；（非常强烈的折行)
2•word-wrap：break-word;（不是那么强烈的折行，会产生一些空白区域）

cSS复合样式：

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border，有的是需要关心顺序，例如

font.
1. background: red url() repeat
2.border : 1px red solid; 
3. font :
注：最少要有两个值 size family
1.weight style size family

2.style weight size family

3.weight style size/line-height family
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉

CSS选择器

ID选择器
#elem(}. id-“elem”
注：
1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.驼峰写法：searchButton（小驼峰）searchButton（大驼峰）
短线写法：search-small-button
下划线写法：search_ small_ button
2.CLASS选择器
•elem(}. class=“elem”
注：
class选择器是可以复用的。
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序，
4.标签+类的写法

4.群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

5.通配选择器
*{ }->div,ul,li,P,h1,h2 ….{ }
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。

使用的场景：
1．去掉所有标签的默认样式时
6．层次选择器
后代 MN{ }
父子M>N{ }
兄弟M~N{ }当前M下面的所有兄弟N标签
相邻M+N { } 当前M下面的相邻兄弟N标签

7.属性选择器
M[attr] （）
=：完全匹配
*=：部分匹配
^=：起始匹配
＄=：结束匹配
[][][]：组合匹配

8.伪类选择器
M:伪类{}
:link. 访问前的样式(只能添加给a标签）
:visited. 访问后的样式(只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式（可以添加给所有的标签）
注：

一般的网站都只设置
a{}( link visited active ). a: hover { }

CSS优先级？
1．相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

2．内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

3.单一样式优先级
stvle行间 > id > class > tag >*＞继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重1