作业（css）-CSDN博客

本文链接：https://blog.csdn.net/cc4422bb/article/details/144214201

样式

内部样式

写在</head>上一行

写成<style> css选择器{css样式} </style>

追求结构（html）、表现（css）、行为（js）相分离

外部样式

文件的后缀是.css

要将外部css文件引入html文件中

写法：<link rel="stylesheet" href=""> 写在</head>上一行

外部样式表必须使用link标签的href属性引入到html页面

行内样式

直接给标签添加了style属性 “”内采用键值对的属性

例如<div style=“color：red;”></div>

css选择器

标签选择器

标签选择器：使用标签名作为选择器，只要是这个标签名的标签都会被选中

缺点是同名的标签无法做到差异化

类选择器

类选择器写法： .类名{属性名：属性值；}

一个类选择器可以被多个有需要的标签使用

一个标签可以有多个类名，多个类名用空格隔开

id选择器

写法： #id属性值{属性名：属性值;}

id属性值不能重复

同样的id选择器，在一个页面中只能使用一次

通配符选择器

可以查找页面当中所有的标签

写法 *{属性名：属性值；}

一般用来清除页面中某些默认的样式

尺寸和颜色

width：；宽

height：；高

background-color：；背景颜色

a链接，span标签无法设置宽高

字体相关的样式

字体颜色：color：；

字体大小（字号）：font-size：；单位是px

字体倾斜：font-style：； normal正常 italic倾斜

行高：line-height：；数字+px 如果只有数字表示当前字体大小的几倍

可以利用行高实现单行文本的垂直居中

字体：font-family：；楷体

字体粗细：font-weight：；填写100-700， 400为正常 700为加粗或填bold（加粗）

复合的写法：font：；一次对于多个字体相关的值

顺序要求font：是否倾斜是否加粗字体大小/行高字体；

使用font属性后，字号和字体是必须书写的，其他的不书写表示使用默认的

文本缩进

文本缩进text-indent：1em； 1em表示当前一个字符的大小

文本对齐方式

文本水平对齐方式 text-align：； center居中 left/right 左/右

文本装饰线

text-decoration：； none表示没有装饰线 line-through删除线

underline下划线 overline上划线

改文字的颜色

1.color：关键色;

2. color：rgb(数字，数字，数字); （通过三元色调色）

3. color:rgba（数字，数字，数字，数字）；最后一个数字表示透明度

0-1表示透明值，越靠近0越透明

4.background-color：#+16进制；

选择器

复合选择器

两个及两个以上的选择器
后代选择器：某个元素的所有后代元素写法：父选择器子选择器{ }
子代选择器：某个元素下面的子代元素(最近的子集) 写法：父类选择器>子类选择器{ }

并集选择器：一次性选中多个标签，多个选择器之间用逗号隔开

例如：div，p，span{ } 或 .one，p，span{ } （<div class="one"></div>）

交集选择器：选中同时满足多个条件的标签，并且选择器之间没有任何的间隔和符号

写法：选择器1选择器2{ } 两个选择器之间不需要任何东西

伪类选择器

表示选择元素的某个状态写法：冒号+属性值

：hover 表示鼠标悬停时

a：link 表示（超链接）访问前

a：visited 表示（超链接）访问后

a：active 表示（超链接）访问时

想要全部使用需要顺序要求：LVHA （先link，再visited,再hover，最后active）

:checked 选择所有选中的表单元素

:disabled 选择所有禁用的表单元素

:empty 选择所有没有子元素的p元素

:enabled 选择所有启用的表单元素

:first-of-type 选择的每个p元素是其父元素的第一个p元素

:nth-child(数字) 选中某个元素下的子元素

例如：1. ul li:nth-child(3){ } 表示选中ul下的第三个li

2.p:nth-child(3){ } 表示选中p标签的父元素下的子元素，且第三个子元素为p标签

:first-child 父元素下的第一个子元素

:last-child 父元素下的最后一个子元素

:nth-child(2n+1) 奇数个

:nth-child(2n) 偶数个

:nth-of- type(1) 表示第一个p标签

:focus{ } 表示聚焦状态（选中状态）

属性选择器

写法：标签【属性=属性值】{ } （具有xx属性的xx标签）

标签【属性^=x】以x为开头的标签

标签【属性$=x】以x为结尾的标签

标签【属性*=x 】含有x的标签

其他

兄+弟：紧挨着兄标签的下一个弟标签，并且具有相同的父元素

兄~弟：选取兄弟元素后面所有的相同元素，要求不必紧紧跟随并且是同一个父元素

作业（css）

样式