HTML中的CSS超详细使用（附代码图文示例）【干货】 |
您所在的位置：网站首页 › 进入美食页面介绍怎么写啊英语 › HTML中的CSS超详细使用（附代码图文示例）【干货】 |
HTML中的CSS超详细使用（附代码图文示例）【干货】
|
Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中的CSS详细使用（附代码图片示例）以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言 目录 ⭐为什么使用CSS： ⭐CSS中的样式使用 🍧字体样式： 一、字体样式的概念及使用 二、字体样式总结 三、字体样式图片示例： 四、代码示例： 🍧文本样式： 一、文本样式的概念及使用 二、文本样式总结 三、文本样式图片示例： 四、代码示例 🍧CSS中的文本阴影： 🍧超链接伪类： 一、超链接伪类的概念及使用 二、超链接伪类总结 三、超链接伪类的动画示例 四、超链接伪类代码演示 🍧列表样式： 一、列表样式的概念及使用 二、列表样式总结 三、列表样式图片示例 四、列表样式代码示例 🍧网页背景： 一、网页背景的概念及使用 二、网页背景总结 为什么使用CSS：CSS（层叠样式表）是一种用来描述网页上元素样式的技术。使用CSS的主要原因包括以下几点： ①有效的传递页面信息②使用CSS美化网页使网页漂亮、美观、吸引用户③可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容④具有良好的用户体验 CSS中的样式使用 字体样式： 一、字体样式的概念及使用 ①font-family：设置字体类型/举例：font-family："楷书"②font-size：设置字体大小(单位：px(像素)、em、rem、cm、mm、pt、pc)/举例：font-size：12px③font-style：设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))/举例：font-style：italic④font-weight：设置字体的粗细 normal：默认值,定义标准字体bold：粗体字体bolder：更粗的字体lighter：更细的字体100、200……900(步长100)：定义由细到粗的字体,400等同于normal,700等同于bold举例：font-weight：bold⑤foot：在一个声明中设置所有字体属性字体属性的顺序：字体风格->字体粗细->字体大小->字体类型 举例： foot：italic bold 12px "楷书"; 二、字体样式总结 字体样式描述font-family设置文本的字体类型("楷书")font-size设置文本的字体大小（单位：px、em、rem、cm）font-style设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))font-weight设置文本的字体粗细（默认(normal)、粗体(bold)、更细(lighter)、步长(400)）foot风格(style)、粗细(weight)、大小(size)、类型(family) 三、字体样式图片示例：
字体类型--font-family 字体大小--font-size 字体风格--font-style 字体粗细--font-weight 字体样式--设置所有字体样式 文本样式： 一、文本样式的概念及使用 ①color：设置文本颜色②text-align：设置元素水平对齐方式 left：左对齐,默认值right：右对齐center：居中justify：实现两端对齐文本效果③vertical-align：设置元素垂直对齐方式 top：顶部middle：中部bottom：底部③text-indent：设置首行文本的缩进(单位px或em)/举例：text-indent:20px④line-height：设置文本的行高(单位px)/举例：line-height:25px⑤text-decoration：设置文本的装饰 none：默认值,定义的标准文本underline：设置文本的下划线overline：设置文本的上划线line-through：设置文本的删除线 二、文本样式总结 文本样式描述color设置文本颜色text-align设置元素水平对齐方式（左、右、居中、两端）vertical-align设置元素垂直对齐方式（顶部、中部、底部）text-indent设置首行文本的缩进(单位px或em)line-height设置文本的行高(单位px)text-decoration设置文本的装饰（下划线、上划线、删除线） 三、文本样式图片示例：
color--文本颜色 text-align--水平对齐方式 vertical-align--垂直对齐方式 text-indent--文本缩进 line-height--文本行高 text-decoration--以下是文本装饰： text-decoration:nono--文本装饰-默认值 text-decoration:underline--文本装饰-下划线 text-decoration:overline--文本装饰-上划线 text-decoration:line-through--文本装饰-删除线 CSS中的文本阴影：text-shadow：color(阴影颜色) x-offset(X轴位移,用来指定阴影水平位移量) y-offset(Y轴位移,用来指定阴影垂直位移量) blur-radius(阴影模糊半径,代表阴影向外模糊的模糊范围)/X轴、Y轴和半径单位都为px。 超链接伪类： 一、超链接伪类的概念及使用标签名:伪类名{声明;} 伪类样式： -标签：link 未单击访问时超链接样式/示例：标签:link{color:#eaadea/pink}-标签：visited 单击访问后超链接样式/示例：标签:visited{color:#eaadea/pink}-标签：hover 鼠标悬浮其上的超链接样式/示例：标签:hover{color:#eaadea/pink}-标签：active 鼠标单击未释放的超链接样式/示例：标签:active{color:#eaadea/pink}设置伪类的顺序：link > visited > hover > active 二、超链接伪类总结 伪类样式描述link未单击访问时超链接样式visited单击访问后超链接样式hover鼠标悬浮其上的超链接样式active 鼠标单击未释放的超链接样式 三、超链接伪类的动画示例
超链接伪类 列表样式： 一、列表样式的概念及使用css：标签名{list-style：值} 五种值的表示方式： ①none：无标记符号②disc：实心圆,默认类型③circle：空心圆④square：实心正方形⑤decimal：数字 二、列表样式总结 列表样式描述none无标记符号disc实心圆,默认类型circle空心圆square实心正方形decimal数字 三、列表样式图片示例
背景颜色： background-color：颜色值背景图像： 标签名{background-image: url("图像路径")}背景重复方式： 标签名{background-image: url("图像路径");background-repeat: 属性} 四种属性表示方式： ①repeat：沿水平和垂直两个方向平铺②no-repeat：不平铺，即只显示一次③repeat-x：只沿水平方向平铺④repeat-y：只沿垂直方向平铺背景定位： 标签名{background-image: url("背景图像.png");background-position: 值 值} 三种值表示方式： ①X Y：单位：px，Xpos表示水平位置，Ypos表示垂直位置②X% Y%：使用百分比表示背景的位置③X、Y方向关键词：X水平方向的关键词：left、center、right;Y垂直方向的关键词：top、center、bottom设置背景属性样式简写： 标签名{background: 背景颜色 背景图像 背景重复方式 背景定位} 示例：#id{background: pink url("背景图像.png") no-repeat center center}背景尺寸： 标签名{background-image: url("背景图像.png");background-size：值} 四种值表示方式： ①auto：默认值，使用背景图片保持原样②percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的③cover：整个背景图片放大填充了整个元素④contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域背景渐变(线性渐变)： 标签名{background: linear-gradient(渐变方向, 第一种颜色,第二种颜色……)} 示例：{background: linear-gradient(to left, blue,red)} 二、网页背景总结 网页背景样式描述background-color背景颜色background-image: url("图像路径")背景图像background-repeat背景重复方式 background-position背景定位（X Y、X% Y%、X、Y方向关键词）background-size背景尺寸（默认、百分百、放大填充、自适应比例）linear-gradient背景渐变（线型渐变）总结不易，希望uu们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁 |
【本文地址】
今日新闻 |
推荐新闻 |