CSS样式

选择器

通用选择器
  • 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示。
id选择器
  • HTML元素以id属性来设置id选择器,CSS中id选择器以 # 来定义
class选择器
  • class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点"."号显示
标签选择器
  • 以 HTML 标签作为 CSS 修饰所用的选择器。
内联选择器
  • 第四种内联选择器即直接在标签内部写 CSS 代码。
属性选择器
  • CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
后代选择器

后代组合器(通常用单个空格 字符表示)组合了两个选择器,如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先(父母,父母的父母,父母的父母的父母等)元素,则它们将被选择。利用后代组合器的选择器称为后代选择器。

相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
例如:

ul li{background:red}

子元素选择器

当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

CSS创建

1.外部样式表

1.用以下方法引入写在外部的样式
<link rel="stylesheet" type="text/css" href="文件名.css">

2.内部样式表(样式写在style内)
写在头部<head><style></style></head>

3.内联样式
** 样式直接写在标签内 **

背景

背景颜色

background-color

背景图像

background-image

背景图像 - 水平或者垂直平铺或者不平铺

background-repeat

水平平铺:repeat-x
垂直平铺:repeat-y
不平铺:no-repeat

背景图像- 设置定位

background-position

关键字:top、bottom、left、right和center
注意: 可以使用长度值,也可以使用百分比

Text(文本)

Text color

颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定:

  • 十六进制- 如"#FF0000 "
  • 一个RGB值- “RGB(255,0,0)”
  • 英文单词 - 如"red"
文本对齐方式

文本排列属性是用来设置文本的水平对齐方式

text-align:属性值可以设置为center、left、right、justify(两端对齐)

文本修饰

text-decoration属性用来设置或删除文本的修饰

1.下划线:underline
2.删除线:line-through
3.波浪线wavy
4.实线:solid
5.虚线:dashed

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

实例
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。
通过使用 text-indent属性,所有元素的第一行都可以缩进一个给定的长度。

文本间隔

word-spacing属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

所有CSS文本属性
属性描述
color设置文本颜色
direction设置文本方向
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

如有其他需要请评论关注私信

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_45908444

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值