CSS基础知识点1

css基础

字体设置

1.font-size  字体大小
2.font-family 字体样式
3.font-weight 字体粗细
4.bold 设置粗体 lighter更细的字体
5.font-style 字体风格
6.font-variant：small-caps 小型大写

引入css样式表

1. 行内式也称为内联样式
   <标记名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容<标记名>

2.内嵌式
<style type=“text/css”></style>

3.链入式
<link href=“css” rel=“stylesheet”>

选择器

1. id选择器：id属性（ #）

2.类选择器：class属性 （.)
类名的第一个字符不能使用数字，严格区分大小写

3. 标记选择器：html

4.标签指定式选择器（交集选择器）
由两个选择器构成其中一个为标记选择器另一个为id选择器
两个选选择器之间不能有空格例如
<p>~</p>
<p class=“special”>
p{…}
p.special{…}

5.后代选择器
用来选择元素或元素组的后代中间有空格
例如<p>段落文本<strong>文本</strong> 后续</p>
选择器的写法
p strong{。。。}
6.并集选择器
各个选择器通过逗号连接而成的

文本样式

1. word-wrap属性 用于实现长单词和URL地址的自动换行
   2.normal 只在允许的段字点换行
   3.break-word：在长单词或URL地址内部进行换行
   4.line-height：行间距
   5.text-transform：文本转换，控制英文字符的大小写
   6.capitalize：首字母大写
   7.text-decoration：文本装饰（可以有underline（下滑线）overline（上划线）line-through（删除线）
   8.text-indent：首行缩进（只允许使用负值单位有em，px）
   9.white-space：空白符处理

hormal：默认，文本中的空格，空行无效，满行自动换行
howrap：空格（行）无效，强制文本不能换，除非遇到<br>

文本外观属性

1.text-shadow:阴影效果

text-shadow:h-shadow(设置水平阴影距离） v-shadow(设置垂直阴影距离） blur（模糊半径，only为正，值越大，范围越大）color（阴影颜色）；

2.text-overflow：标示对象内溢出文本

clip：修剪溢出文本，不显示省略标记
ellipsis：用省略标记“…"标示被修剪文本，省略标记插入的位置是最后一个字符
overflow:hidden隐藏溢出文本

3.css优先级

优先级按权重大小，权重越大越优先
p{color：red} 标记选择器权重为 1
.blue{color：blue} 类选择器权重为10
#header{color：yellow}id选择器的权重为100
行内式优先 应用style属性元素 权重远大于100
继承样式的权重为0，即在嵌套结构中不管父元素样式权重有多大，被继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式
权重相同时，就近原则
！important 最大优先级，无论权重有多大，这个最优先
复合选择器无论多少个标记选择器/类选择器叠加都不会高于类选择器/id选择器

属性选择器

1.E[att^=value]属性选择器

E为选择器名称，可以省略，省略表示可以匹配满足条件的任意元素
attr定义的属性
value 子字符串
例子：div[id^=section] div属性 id属性值 表示是以section开头的div元素

2.E[attr$=value]

各个次的解释跟上面一样

3.E[attr*=value]

解释和第一个一样

关系选择器

1.子代选择器（>)

选择某个元素的第一级子元素

2.兄弟元素（”+“ “~”）

选择与某元素位于同一个父级元素之中且位于该元素之后的兄弟元素
1。临近兄弟选择器（+）
最相近的一个，往后紧跟第一个
例如p+h2{ }为p元素的第一个兄弟元素h2定义

2. 普通兄弟选择器（~）

p~h2{ }h2不必紧跟第一个元素

结构化伪类元素

1. <元素>：not选择器

对某个结构元素使用样式，但排除结构元素下面的子元素例如
body  *not（h3）{ }排除body下的<h3>元素

2.：root选择器

用于匹配根元素，对页面元素都生效，若不需要该样式可以单独设置进行覆盖
：root{ }

3.<元素>：only-child选择器

匹配属于某父元素的唯一子元素，即仅有一个子元素
例如：li：only-child{。。。}li父元素只有一个li元素

4.<元素>：first-child选择器 last-child选择器

父元素中的第一个或最后一个子元素设置样式
例如： p：first-child{。。。} p 子元素

5.<元素>：nth-child（n）
<元素>：nth-last-child（n）

n为行数，匹配属于父元素的第几个子元素与元素类型无关

6.<元素>：nth-of-type（even）为偶数行的某元素
<元素>：nth-of-type（odd）为基数行的某元素
<元素>：nth-last-of-type（n）为倒数第几行元素添加样式

匹配属于父元素的特定类型的第几个元素

：empty

选择没有子元素或文本内容为空的所有元素

：target

为页面某个target元素（该元素的id被当作页面中得到超链接使用

伪元素选择器

针对css中已经定义好的伪元素使用的选择器
1.：before

用于备选元素之前插入内容，必须配合content属性来指定要插入的内容
语法：<元素>：before{
content：文字/url（）；
}
2.：after
用于在某个元素之后插入内容，使用方法与before相同
例如<元素>：after{
content：文字/url（）；
}