Css概要

最新推荐文章于 2024-08-15 23:19:32 发布

木三malisa

最新推荐文章于 2024-08-15 23:19:32 发布

阅读量83

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_48419222/article/details/108309258

版权

css整合

css用于显示控制HTML

关于css选择器优先级

内联 > 内部 > 外部(默认)

1.内联

写在标签里面

<li style="color:..."></li>

2.内部

*写在HTML中 *

<style>
h3{...}
</style>

3.外部

从css引入常用

<head>
<link rel="stylesheet" href="..引入路径"/>
</head>

css选择器

优先级：id > class > html标签

1.html选择器

拿标签做选择器式

h1{...}

2.id选择器

通过设置id

<h1 id="hid"></h1>

#id{...}

3.类选择器

通过设置class
可以有两个属性名 eq：class=“aa dd”

<h1 class="hid"></h1>

h1.hid{...} /* 或者*/
.hid{...}

4.关联选择器

根据嵌套设置

<ol><li></li></ol>

ol li{...}

5.选择器组

选择任意想要设置的标签

h1,h4,li{...}

6.伪类选择器

a:link{...} /*未访问*/
a:visted{...} /*已访问*/
a:hover{...} /*鼠标在链接上*/
a:active{...} /*激活链接*/

css3中选择器

1.关系选择器

<div>
<p></p>
<p></p>
</div>

div>p div中直接子标签p采用此样式
div+p 紧贴div后最近的p
div~p div后所有兄弟元素p

2.属性选择器
3.结构型伪类选择器
4.状态伪类选择器

颜色属性

1.rgb(x,y,z) [rab(0,0,0)~rgb(255,255,255) 红绿蓝]
2.颜色单词 blue black
3.rgb(x%,y%,z%)
4.#16进制
5.rgba(x,y,z,k(透明度<1))
延伸：图片透明度 img.opacity{opacity:0.25;}

字体属性 font

font-size	字大小
font-family	字体宋体：Arial
font-style	normal正常 italic斜体 oblique 斜体
font-weight	bold 粗体（或者填数字）
font-height	行高（填数字）
text-indent	（…em）每段文章首行缩进几个字
text-align	文本位置
text-decoration	线 line-through贯穿线 underline下划线
text-shadow	0px(水平移) 0px(垂直移) 0px(模糊) 颜色；
vertical-align	文本垂直对齐方式 middle bottom top
letter-spacing	（…px）字间距

背景属性 background

background-color	背景颜色
background-image	背景图片 url("…")
background-repeat	no-repeat不平铺 repeat-x横着平铺 repeat-y竖着平铺
background-position	背景位置 ①top center 上中部…②0px -20px
background	①url(…) ②定位center center ③no-repeat ④颜色
background-attachment	fixed滑动固定
background-size	x% y%
background-image	repeating-linear-gradient(to right,颜色，颜色)；渐变色

边框属性border

border	宽度样式颜色；
border-color	边框颜色
border-style	solid实线 dotted点状线 dashed虚线
border-width	边框宽度
border-left-color	左边框线颜色
border-image	边框其他
border-radius	20px;(半径为20圆角) 20px左上 30px右上 0px右下 0px左下
box-shadow	0px 0px 4px 4px rgba(…,…,…,…);

内补白padding

paddig-top	padding-bottom
passing-left	padding-right

外补白margin

margin-top	margin-bottom
margin-left	margin-right
margin	100px auto;上下100px 左右居中

定位属性pisition

position	absolute绝对 fixed固定 relative相对于外层定位
top
left…

布局属性

display	none; block;块状化
float	浮动 left right
clear	清除 left right
overflow	hidden超出隐藏

木三malisa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css概要

css整合css用于显示控制HTML关于css选择器优先级内联 > 内部 > 外部(默认)1.内联写在标签里面<li style="color:..."></li>2.内部*写在HTML中 *<style>h3{...}</style>3.外部从css引入常用<head><link rel="stylesheet" href="..引入路径"/></head>c
复制链接

扫一扫