css学习笔记

css引入

 <link rel="stylesheet" href="">

@import url (“”);[在css文件中引入其他css文件]

<div style=""> </div> 内联样式表

内部样式表与外部样式表取决于哪个后引入，内联样式表优先级最高

背景图

backgroud-image: url ()
backgroud-size: width heght; [如果只给一个，另一边会等比例变化]
两个特殊值 contain 图片长边占满父级 cover 图片短边占满父级
backgroud-position xpx ypx; (也可以写 center top left right bottom) 
background-repeat： repeat-x  (no-repeat)                   图片重复
背景图可以在里面写文本

文本的常用样式

用户常用浏览器支持最小字体大小是14px，默认像素大小为16px
em是相对单位，1em = 父级标签的字体大小
默认像素大小可以修改

<style>
html{
    font-size: xpx;
}
</style>

文本对齐方式 text-align：（center left right ）
backgroud-color 文字框背景颜色
标签高度不是由文本内容撑开的，而是由行高决定的（line-height:）
当line-height 的值等于height 的值，文本垂直居中

首行缩进：text-indent: ;
字体间距：letter-spacing: ;
单词间距： word-spacing: ;
英文大小写转换: text-transfrom: ;
文本空白符处理: write-space: (wrap nowrap)
文本装饰线: text-decoration: (underline,overline,linethrough,none);

鼠标放在超链接上超链接变颜色 使用:hover

a:hover{
    color:
}

常用的选择器

通配选择器

<style>
*{

}
</style>

class选择器

两个类名只需要用空格隔开就可以

<p class="a c"></p>

类名在css中前面要加.

id选择器

<p id="a"></p>

css中要#代表id

#a{

}

一个id名在同一个html文件中只能出现一次

优先级
style(1000)> id(100) > class(10) > tag(1)
当在一个样式声明中出现 !important 规则时，这个样式则覆盖其他任何说明，与优先级无关

后代选择器

父级（例如 div）  p{

}

后代选择器权重相加

子代选择器

div>p{

}

群组选择器

h1,p{
    color:
}

后代选择器之间用空格隔开，群组选择器之间用逗号隔开

属性选择器

[class]{
    /* 哪个标签有class */
}

[class="ok"]{
    /* 更具体的 */
}

常用的伪类选择器

1. :hover 用于设置鼠标悬停在元素上方时的样式
2. :focus 用于设置元素获得焦点时的样式
3. :active 用于设置元素被激活时（按下按键时、松开按键时）的样式
4. :link 用于设置元素点击之前的样式（仅可用于a标签）
5. :visited 用于设置被访问的元素的样式（仅可用于a标签）
6. :first-child 用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求
7. :first-of-type 用于选取属于其父元素的第一个特定类型的子元素
8. :last-child 用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
9. :last-of-type 用于选取属于其父元素的最后一个特定类型的子元素
10. :nth-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1）
11. :nth-of-type(N) 选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字（odd / even）、公式
12. :nth-last-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式
13. :nth-last-of-type(N) 选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式

• 常用伪元素选择器

1. ::after 用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素 p::after {
   content: ＂结束＂;
   }
2. ::before 用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素 p::before {
   content: ＂开始＂;
   }
3. ::first-line 向文本的首行添加样式，只能应用于块级元素 p::first-line {
   color: #333;
   }
4. ::first-letter 向文本的首字母添加样式，只能应用于块级元素 p::first-letter {
   font-size: 16px;
   }
5. ::marker 用于改变li元素的数字或符号的样式，只能作用于display属性值为list-item的元素 ul li::marker {
   content: ‘*’;
   }
6. ::placeholder 用于设置表单元素占位符文本的样式 input::placeholder {
   color: blue;
   }