css笔记

CSS:层叠样式表-----是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

 

css书写规范：

选择器{

属性名：属性值；

属性名：属性值；

属性名：属性值；

}

 

行内样式

例：<div style="width:100px;hight:100px">文字</div>

内部样式表

写在头部

<style>

<div>{

        width:100px;

        hight:100px

}

<style>

外部样式

创建一个以.css结尾的文件

写div{

        width:100px;

        hight:100px

}

在内部样式头部中写入<link rel="stylesheet" href="./路径"

基础选择器

1、标签选择器：选择当前页面中所有符合标签

标签名{

属性：属性名；

}

2、id选择器

#id{

属性：属性名；

}

类选择器

3、.标签名{

属性：属性名；

}

通配符选择器--------选中所有的元素

*{

属性：属性名；

}

font-size改变字体大小

包含选择器

1、子代选择器

2、后代选择器

 

css样表存在层叠性，后面的会把前面的覆盖掉

逗号选择器即复合选择器

属性选择器

Input[type="属性"]------属性全称

Input[type*="]-------要选中属性中与其它属性不同的地方(属性中包含的东西）"]

Input[type^=""]----------以什么开头

Input[type$=""]----------以什么结尾

伪类选择器-----元素在不同状态下的样式

用链接举例：a:link

{

Color:pink;

}------设置点击链接前，链接的颜色

鼠标悬停时的样式

A:hover+div{

Color:pink;

}-------鼠标放在链接上，链接变颜色-----"+div"鼠标放在链接上div变色------"="表示a链接的下一个

访问之后的样式

A:visited{

Color:pink；

}-----鼠标点击链接之后，链接的颜色

获取焦点的样式

a:focus{

Color:pink；

}------按tab键获取焦点，链接变色

A:active{

Color:pink；

}--------点击鼠标不放开时链接颜色

结构伪类选择器

 <style>

Ul li:nth-child(9){

Backgroud-color:pink;

}</style>-----将ul中第九行变色

<style>

Ul li:last-child{

Backgroud-color:pink;

}

</style>------最后一行变色

<style>

Ul li:nth-child(2n+1){

Backgroud-color:pink;

}</style>-----奇数行变色

"::"----伪元素，必须和content一起

----在内容前加##3#，在后加用after

Input::placeholder{

Color:pink;

}---------设置提示词的颜色

Div::selection{

Color:pink

}----------鼠标选择部分变颜色