css动态样式(HTML中CSS样式)-成都乘龙传媒

网站公告：

乘龙传媒提供先进的网络技术，丰富的运营经验，优秀的设计方案，独特的优化技术，大量同行都在乘龙传媒消化单子。我们帮助合作伙伴成功，协助客户拓展业务，提升品牌知名度！

首页 > 新闻资讯 > 成都seo

成都seo

css动态样式(HTML中CSS样式)

点击次数：1 更新时间：2022-11-23 【打印此页】【关闭】

选择器

子孙后代选择器:*通过元素之间的层级关系选择元素

格式:*body*div*div*p{样式代码}*匹配body里面的div里面的div里面的所有p标签(包括后代)

子元素选择器:*通过元素之间的层级关系选择元素

格式:*body>div>div>p{样式代码}*匹配body里面的div里面的div里面的所有p子元素(不包含后代)

伪类选择器:*选择的是元素的状态,*元素有哪些状态?*【包括】:未访问状态,访问过状态,悬停状态,点击状态

格式:*a:link/visited/hover/active:{样式代码}


****
****Title
	




****刘备
关羽张飞

香蕉
苹果



****p1
****p2
****p3

注释助手

颜色赋值

三原色:*红绿蓝*,red*green*blue*rgb*,每个颜色的取值范围0-255*颜色赋值的几种方式:

颜色单词:*常见颜色单词都可以使用
6位16进制赋值:*#ff0000*3位16进制赋值:*#f00
3位10进制赋值:*rgb(255,0,0)
4位10进制赋值:*rgba(255,0,0,0~1)*a=alpha代表透明度


颜色测试

背景图片

background-image:url("路径")*设置背景图片
background-size:100px*200px*设置背景图片尺寸
background-repeat:no-repeat;*禁止重复
background-position:*横向*纵向;*设置背景图片的位置,两种方式:*①像素*②百分比

文本和字体相关样式

text-align:left/right/center;*文本水平对齐方式
line-height:20px;*设置行高,*多行文本时可以控制行间距,*单行文本时可以控制垂直居中(因为文本默认是在当前所在行内居中)
text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰
text-shadow:颜色*x偏移值*y偏移值*浓度;*阴影
font-size:20px;*设置字体大小
font-weight:bold加粗/normal去掉加粗
font-style:italic;*设置斜体
font-family:*xxx,xxx,xxx;*设置字体
font:20px*xxx,xxx,xxx;*这只字体大小+字体



这是个h3
超链接
文本和字体测试

元素的显示方式display

block:*块级元素的默认值,*特点:*独占一行*可以修改宽高,*包括:*h3-h6*,*p,*div
inline:*行内元素的默认值,*特点:*共占一行*不可以修改宽高,*包括:*span,*b,i,s,u,超链接a
inline-block:行内块元素默认值,*特点:*共占一行*并且可以修改宽高,*包括:*img,input
none:*隐藏元素
行内元素不能直接修改宽高,*如必须修改则先将元素的显示方式改成block或inline-block



查看详情



div1
div2
div3
span1
span2
span3

盒子模型

盒子模型用来控制元素的显示效果包括:*元素内容content+外边距margin+边框border+内边距padding

元素内容content:控制元素的显示尺寸
外边距margin:控制元素的显示位置
边框border:控制边框效果
内边距padding:控制元素内容的位置

border边框效果

盒子模型之内容content

包括:width和height
赋值方式有两种:①像素*②上级元素的百分比
行内元素不能直接修改宽高

盒子模型之外边距margin

作用:*控制元素的显示位置
赋值方式:

margin-left/right/top/bottom:10px;*单独某个方向赋值

margin:10px;*四个方向赋值

margin:10px*20px;*上下10*左右20

margin:10px*20px*30px*40px;*上右下左*顺时针赋值

行内元素上下外边距无效
上下相邻彼此添加外边距*取最大值
左右相邻彼此添加外边距*两者相加
粘连问题:*当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

盒子模型之边框border

赋值方式:

border:1px*solid*red;*给四个方向添加边框

border-left/right/top/bottom:1px*solid*red;*单独给某个方向添加边框

border-radius:10px;*值越大越圆*当值超过宽高的一半时为正圆(前提是正方形)



****


span1span2
外边距测试


div2

内边距

****这是个p标签 ****这是div里面的span ****超链接这是div外面的span

**** ********灵越*燃7000系列 ******** ************酷睿双核i5处理器|256GB*SSD|*8GB内存 ************英特尔HD显卡620含共享显卡内存 ******** ********￥4999.00 ********查看详情 **** **** ********颜值*框不住 ******** ************酷睿双核i5处理器|256GB*SSD|*8GB内存 ************ ************英特尔HD显卡620含共享显卡内存 ******** ********￥6888.00 ********查看详情 ****

成都seo

css动态样式(HTML中CSS样式)

颜色测试

这是个h3

相关资讯

热门新闻

最新资讯文章