CSS

文字相关属性

文字样式

• font-style : normal / italic;

文字粗细

• font-weight : lighter / normal / bold / bolder / 1~900(100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold)

文字大小

• font-size

文字字体

中文必须用双引号引起来, 英文字体在前,中文字体在后

• font-family : Arial, “微软雅黑”, “SimSun”;

宋体　　　　SimSun　　　　　　　 \5B8B\4F53
新宋体　　　NSimSun　　　　　　　\65B0\5B8B\4F53
黑体　　　　SimHei　　　　　　　　\9ED1\4F53
微软雅黑　　Microsoft YaHei　　　 　\5FAE\8F6F\96C5\9ED1

文字属性简写

font : style weight size/height family;

---

文本属性

文本装饰

text-decoration: none / overline / line-through / underline;

文本水平对齐

text-align: left / center / right;

文本缩进

text-indent: 2em; (一个em相当于一个文字)

---

选择器

后代选择器(空格连接)

选择器1  选择器2 {
	属性 : 值;
}

子元素选择器(>连接)

选择器1 > 选择器2 {
	属性 : 值;
}

交集选择器(紧跟)

选择器1选择器2 {
	属性 : 值;
}

并集选择器(逗号连接)

选择器1 , 选择器2 {
	属性 : 值;
}

兄弟选择器

• 相邻兄弟选择器(加号连接)

选择器1 + 选择器2 {
	属性 : 值;
}

• 通用兄弟选择器css3(波浪线连接)

选择器1 ~ 选择器2 {
  属性 : 值;
}

序选择器

同级别	同类型
:first-child 同级别第一个	:first-of-type 同级别同类型第一个
:last-child 同级别最后一个	:last-of-type 同级别同类型最后一个
:nth-child(n) 同级别第n个	:nth-of-type(n) 同级别同类型第n个
:nth-child(odd) 同级别奇数	:nth-of-type(odd) 同级别同类型奇数
:nth-child(even) 同级别偶数	:nth-of-type(even) 同级别同类型偶数
:nth-last-child(n) 同级别倒数第n个	:nth-last-of-type() 同级别同类型倒数第n个
:only-child 同级别父元素中唯一的元素	:only-of-type 同级别同类型父元素中唯一类型的某个元素

:nth-child(xn+y) x,y用户自定义,n从0递增

属性选择器

• [attribute]
  用于选取带有指定属性的元素。

[id] {
   color: aquamarine;  /*选择带有id属性所有元素*/
}

p[id] {
   color: aquamarine;  /*选择p标签中带id属性所有元素*/
}

• [attribute=value]
  用于选取带有指定属性和值的元素。

• 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用

input[type="text"] {
   width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
    font-family: Verdana, Arial;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
    font-family: Verdana, Arial;
}

• [attribute^=value]
  属性的取值是以什么开头的

 a[src^="https"]     /*选择其 src 属性值以 "https" 开头的每个 <a> 元素*/

• [attribute$=value]
  属性的取值是以什么结尾的

 a[src$=".pdf"]	/*选择 src 属性以 ".pdf" 结尾的所有 <a> 元素*/

• [attribute*=value]
  属性的取值是否包含某个特定的值得

 a[src*="abc"]	/*选择 src 属性中包含 "abc" 子串的每个 <a> 元素*/

---

背景相关

背景颜色

在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的

• 取值: 具体单词 / rgb / rgba / 十六进制

background-color: red;

背景图片

在CSS中有一个叫做background-image: url();的属性, 就是专门用于设置背景图片的

background-image: url(images/a.webp);

• 注意点:
  1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
  2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
  3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

背景图片的平铺方式

在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的

• 取值:
  repeat 默认, 在水平和垂直都需要平铺
  no-repeat 在水平和垂直都不需要平铺
  repeat-x 只在水平方向平铺
  repeat-y 只在垂直方向平铺

background-repeat: no-repeat;

背景关联方式

默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式

• 格式
  background-attachment：scroll;
• 取值：
  scroll 默认值， 会随着滚动条的滚动而滚动
  fixed 不会随着滚动条的滚动而滚动

背景定位属性

在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置

• 格式:
  background-position: 水平方向 垂直方向;
• 取值
  • 具体的方位名词
    水平方向: left center right
    垂直方向: top center bottom
  • 具体的像素
    例如: background-position: 100px 200px; (右下正左上负)
    记住一定要写单位, 也就是一定要写px
    记住具体的像素是可以接收负数的
• 注意点:
  同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

背景属性缩写的格式

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

• 快捷键 : bg+ background: #fff url() 0 0 no-repeat;

背景图片和插入图片区别

• 背景图片仅仅是一个装饰, 不会占用位置 ; 插入图片会占用位置

• 背景图片有定位属性, 所以可以很方便的控制图片的位置
  插入图片没有定位属性, 所有控制图片的位置不太方便-插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

---