CSS常用知识(后端开发必备) ゝ一世哀愁。 2022-10-21 03:44 236阅读 0赞 ### 目录 ### * * * 一、CSS和HTML的关系 * 二、CSS的三种使用方式 * * (一)直接在属性上加 style="属性:值" * (二)在head和body中间加style,在style中编写对应东西 * (三)创建CSS文件,在CSS文件中编写并在HTML中引进来 * * 1.在head中引用 * 在style中引用(style位于head和body中间) * 三、选择器 * * (一)元素(标签)选择器 * (二)类选择器 * (三)id选择器 * (四)类选择器与id选择器区别 * (五)选择器组 * (六)派生选择器 * 四、伪类(lhva顺序不可变) * 五、属性 * * (一)文本属性 * (二)背景属性 * (三)列表属性 * (四)边框属性 * (五)轮廓属性 * 六、定位 * * (一)默认定位 * (二)浮动定位 * (三)相对定位 * (四)绝对定位 * (五)固定定位 * 七、Z轴属性 * 八、阴影 * 九、圆角 * 十、渐变 * * (一)径向渐变 * (二)线性渐变 * 十一、背景 * * (一)背景位置 * (二)背景大小 ### 一、CSS和HTML的关系 ### HTML是网页制作的一个架构,而CSS则是美化这个网页的一个工具 注意: CSS中style编写格式 选择器{ 属性:值 } ### 二、CSS的三种使用方式 ### #### (一)直接在属性上加 style=“属性:值” #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 style="color:red">中国</h1> </body> </html> #### (二)在head和body中间加style,在style中编写对应东西 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 选择器{ 属性:值 } */ h1{ color:rebeccapurple } </style> <body> <h1>中国</h1> </body> </html> #### (三)创建CSS文件,在CSS文件中编写并在HTML中引进来 #### ##### 1.在head中引用 ##### 引用方式: head中添加 <link href="CSS文件地址" rel="stylesheet"/> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="css/01.css" rel="stylesheet"/> </head> <body> <h1>CSS使用方法3:在head中使用linked</h1> </body> </html> 1. ##### 在style中引用(style位于head和body中间) ##### 引用方式:style中添加@import url(对应CSS文件地址) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>CSS使用方法3:在style中使用 @import url(地址) </h1> </body> </html> ### 三、选择器 ### #### (一)元素(标签)选择器 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 所有p标签字体都会变成红色 (也可以有其它格式设置,本处以颜色红举例) 标签选择器会选择所有对应的标签,即p标签 */ p{ color: red; } </style> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> </body> </html> #### (二)类选择器 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 标签里面加上class="名字" .class名字 指定的会变成红色,即段落2以红色显示 (也可以有其它格式设置,本处以颜色红举例) */ .p2{ color: red; } </style> <body> <p>段落1</p> <p class="p2">段落2</p> <p>段落3</p> <p>段落4</p> </body> </html> #### (三)id选择器 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 标签里面加上id="名字" # id名字 指定的会变成红色,即段落2以红色显示 (也可以有其它格式设置,本处以颜色红举例) */ #p2{ color: red; } </style> <body> <p>段落1</p> <p id="p2">段落2</p> <p>段落3</p> <p>段落4</p> </body> </html> #### (四)类选择器与id选择器区别 #### id选择器比类选择器更有限制,相对来说id选择器更窄一点 #### (五)选择器组 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 如果两个选择器内部设置相同,那么可以合并两个选择器,中间用逗号隔开 */ .p2,#p3{ color: red; } </style> <body> <p>段落1</p> <p class="p2">段落2</p> <p id="p3">段落3</p> <p>段落4</p> </body> </html> #### (六)派生选择器 #### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* div 标签 :所有的标签都会变红(此处以变红为例,当然也可有有其它设置) */ div p{ color: red; } </style> <body> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> <span> <p>p6</p> <span> <p>p7</p> </span> </span> <p>p8</p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* div > 标签 :只有最外层的标签都会变红(此处以变红为例,当然也可有有其它设置) */ div > p{ color: red; } </style> <body> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> <span> <p>p6</p> <span> <p>p7</p> </span> </span> <p>p8</p> </body> </html> ### 四、伪类(lhva顺序不可变) ### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 未点击百度一下之前的颜色 */ a:link{ color:rgb(8, 7, 7) } /* 鼠标放在百度一下上面的样子 */ a:hover{ font-size: 50px; } /* 访问过百度一下的颜色 */ a:visited{ color: rgb(161, 15, 15); } /* 鼠标点住百度一下没松开时候的颜色 */ a:active{ color: lawngreen; } </style> <body> <a href="https://www.baidu.com">百度一下</a> </body> </html> ### 五、属性 ### #### (一)文本属性 #### ```java font-family 设置文本字体 ——— font-size 设置字体尺寸 font-weight 设置字体的粗细,一般用 normal/bold(加粗) color 字体颜色 text-align 字体对齐方式 line-height 行高 text-decoration 文本装饰,none无,underline下划线 text-indent 文本缩进 ``` #### (二)背景属性 #### background-image:url("图片地址") 设置背景图片 background-color 设置背景颜色 background-position 背景图片的位置 background-repeat 背景的平铺方式———repeat 图片在垂直水平方向上重复 ———repeat-x 图片在水平方向上重复 ———repeat-y 图片在垂直方向上重复 ——— no-repeat 图片不重复 background-attachment:fixed; 背景图片固定 #### (三)列表属性 #### list-style-type: none 没有标记 disc默认标记(实心圆) circle 标记是空心圆 dquare 标记是实心方块 decimal 标记是数字 decimal-leading-zero 0开头的数字标记 lower-alpha upper-alpha 小写大写英文字母 #### (四)边框属性 #### border-width 边框宽度 border-color 边框颜色 border-style 边框样式(solid实线) 可以分别设置上下左右的样式 border-right右/left左/bottom下-属性 #### (五)轮廓属性 #### 边框外面的一条线 outline-width 轮廓宽度 outliner-color 轮廓颜色 outliner-style 边框轮廓样式(solid实线,dashed虚线) ### 六、定位 ### #### (一)默认定位 #### 块级元素可以改变宽高: h,p,div等,自上而下垂直排列 行内元素不能改变宽高:a,b,span等,自左向右水平排列 #### (二)浮动定位 #### float: none 不浮动, left贴着左边浮动, right贴着右边浮动 浮动定位不仅可以靠着左边或右边,还可以消除“块级元素”占一行的特性 margin 外边距 padding 内边距 #### (三)相对定位 #### 和原来的位置进行比较,进行移动定位(偏移) position:relative; top left 如果是对下和右采用top和left的负值即可实现 #### (四)绝对定位 #### 本元素与已定位的祖先元素之间的距离 如果父级元素定位了,就以父级为参照物 如果父级没定位,找爷爷级,爷爷定位了,以爷爷为参照物 如果爷爷没定位,继续向上找,都没定位的话,body是最终选择 position: rabsolute; top left 如果是对下和右采用top和left的负值即可实现 #### (五)固定定位 #### 将元素的内容固定在页面的某个位置,当用户向下滚动页面时元素框并不随着移动 position: fixed; top left 如果是对下和右采用top和left的负值即可实现 ### 七、Z轴属性 ### 如果一个部分有多个元素重叠了,那么就需要使用Z轴属性,定义上下层次 z-index:值; 谁的值越大,谁的层次越靠前,也就是被显现出来 ### 八、阴影 ### box-shadow: 值1 值2 值3 值4 值5; 1 水平阴影 2 垂直阴影 3 模糊半径 4 扩张半径 5 阴影颜色 ### 九、圆角 ### border-radius:值; 值可以改变圆角的程度 \ 写一个值代表border-radius:四个角都是这一个值,4个值代表4个角的值 border-radius:50%; 代表框架是一个圆 ### 十、渐变 ### #### (一)径向渐变 #### 渐变描述的背景颜色,是向外发散,颜色可以多种 background:radio-gradient(颜色,颜色); #### (二)线性渐变 #### 渐变描述的背景颜色,默认渐变色方向是从上到下,颜色可以多种 background:linear-gradient(颜色,颜色); background:linear-gradient(方向,颜色,颜色); 方向: to 方向(例如:to top left) background:linear-gradient(角度,颜色,颜色); 角度: 数值deg ### 十一、背景 ### #### (一)背景位置 #### 背景位置设置必须配合边框 background-origin: 值; 值:border-box 从外边框开始 padding-box 从内边框开始 content-box 从内边距(内容)开始 #### (二)背景大小 #### background-size: cover 尽可能把照片放进去,但是div必须满,完全覆盖 contain 把照片放进去,div不一定铺满,完全适应
还没有评论,来说两句吧...