CSS基础学习总结（1）

岛雨QA
295 阅读9分钟

字体样式属性

综合设置字体样式(font)-重点

语法格式：

选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时一行填写，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用。

字号大小(font-size)

font-size: 10px;

相对长度单位 px（像素，最常用！）

字体(font-family)

p{ font-family:"Microsoft Yahei";}或

p{ font-family:"\5FAE\8F6F\96C5\9ED1";}

字体粗细(font-weight)

font-weight: bold;或

font-weight: 400; (100~900之间的9个数字)

字体风格(font-style)

font-style: normal;

normal：标准样式；italic：斜体；oblique：斜体

外观属性

文本颜色(color)

.red { color : red; }
.orange { color : #FF6600; }
.blue { color : rgb(0,0,155); }

行间距(line-height)

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px（一般情况下，行距比字号大7、8像素左右就可以了）

水平对齐方式(text-align)

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

  • left：左对齐（默认值）
  • right：右对齐
  • center：居中对齐

首行缩进(text-indent)

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。1em 就是一个字的宽度，如果是汉字的段落， 1em就是一个汉字的宽度

字间距(letter-spacing)

其属性值可为不同单位的数值，允许使用负值，默认为normal

单词间距(word-spacing)

其属性值可为不同单位的数值，允许使用负值，默认为normal。仅对英文生效

颜色半透明(rgba)

color: rgba(r,g,b,a)

a的取值范围为0～1

文字阴影(text-shadow)

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

  • 单位是px
  • h-shadow 水平阴影的位置，必选
  • v-shadow 垂直阴影的位置，必选
  • blur 模糊的距离，可选
  • color 阴影的颜色，可选

背景-background

写法说明
background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动
背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景图片(image)

background-image : none | url (url)

参数： 

none :  无背景图（默认的）；

url :  使用绝对或相对地址指定背景图像（url不要加引号）。

背景平铺(repeat)

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

  • repeat :  背景图像在纵向和横向上平铺（默认的）
  • no-repeat :  背景图像不平铺
  • repeat-x :  背景图像在横向上平铺
  • repeat-y :  背景图像在纵向平铺

背景位置(position)

background-position : length || length

background-position : position || position

参数： 

  • length :  百分数 | 由浮点数字和单位标识符组成的长度值
  • position :  top | center | bottom | left | center | right

背景附着(attachment)

background-attachment : scroll | fixed

参数： 

  • scroll :  背景图像是随对象内容滚动
  • fixed :  背景图像固定

背景简写（重点）

background: background-color background-image background-repeat background-attachment background-position

例子：

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明

background: rgba(0,0,0,0.3);

同样， 可以给文字和边框透明,都是rgba的格式来写。

color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

背景缩放

background-size: 300px 500px; // 设置长度单位(px)或百分比

background-size: contain; // 自动调整缩放比例，保证图片始终完整显示在背景区域

background-size: cover; // 自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏

多背景

background-image: url('images/gyt.jpg'),url('images/robot.png');

引入使用CSS

外部样式表(外链式-重点)

快捷键：link:css

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

内部样式表(内嵌式)

<head>
    <style type="text/CSS">
        选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
    </style>
</head>

行内式(内联样式)

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

选择器

标签选择器/元素选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例子：

span { font-size: 100px; }

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例子：

.red-color { color: red; }

<span class="red-color">test</span>

多类名选择器

<div class="font14 pink">test</div>

id选择器

id选择器使用“#”进行标识，后面紧跟id名。元素的id值是唯一的。在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

#id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

通配符选择器

通配符选择器用“*”号表示，能匹配页面中所有的元素

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例子：

/*清除所有HTML标记的默认边距*/
* {
  margin: 0; /* 定义外边距*/
  padding: 0; /* 定义内边距*/
}

伪类选择器

用于向某些选择器添加特殊的效果

链接伪类选择器

  • :link      未访问的链接 （一般不使用）
  • :visited   已访问的链接 （一般不使用）
  • :hover   鼠标移动到链接上（一般使用这个）
  • :active    选定的链接（一般不使用）
a {
    color: gray;
}
a:hover {
    color: red; /*鼠标经过的时候，由原来的灰色变成了红色*/
}

结构/位置伪类选择器

  • :first-child 选取属于其父元素的首个子元素的指定选择器
  • :last-child 选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型
  • :nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

n 可以是数字、关键词或公式 如： 4、even(偶数)、odd(奇数)、n(从0开始所有元素)、2n(偶数)、2n+1(奇数) 等

li:first-child { /*  选择第一个孩子 */
    color: pink; 
}
li:last-child {   /* 最后一个孩子 */
    color: purple;
}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
    color: skyblue;
}

目标伪类选择器

:target 目标伪类选择器，选择器可用于选取当前活动的目标元素

:target {
    color: red;
    font-size: 30px;
}

复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。用的相对来说比较少，不太建议使用。

image.png

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分

image.png 
.one, p , #test {color: #F00;}

表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

image.png

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个> ; 进行连接，注意，符号左右两侧各保留一个空格。

image.png 
.demo > h3 {color: red;}  <!-- demo 元素包含着h3-->

属性选择器

用来选取标签带有某些特殊属性的选择器

选择器示例含义
E[attr]a[title] {    color: orange;}存在attr属性即可
E[attr=val]input[type=text] {    color: deepskyblue;}属性值完全等于val
E[attr*=val]属性值里包含val字符并且在“任意”位置
E[attr^=val]属性值里包含val字符并且在“开始”位置
E[attr$=val]属性值里包含val字符并且在“结束”位置

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器测试</title>
		<style type="text/css">
			li[type] {  /* 获取到拥有type属性的元素 */
				border: 1px solid gray;
			}
			li[type="vegetable"] { /* 获取属性等于vegetable的元素，属性值可以使用引号进行包裹 */
				background-color: green;
			}
			li[type~="hot"] { /* 使用空格分隔的多个属性，其中有某个属性即可获取 */
				font-size: 30px;
			}
			li[color^="green"]{ /* 获取以某个属性开头的语法  */
				background-color: orange;
			}
			li[type$="t"]{ /* 获取以t结尾的属性 */
				color: hotpink;
				font-weight: 900;
			}
			li[type*="ea"]{ /* 获取属性中拥有ea的元素 */
				font-size: 100px;
			}
			li[price|="very"]{ /*  如果属性的值 只有very 也能够获取  用来获取 多个属性 并且 使用-连接 */
				background-color: ;
			}
		</style>
	</head>
	<body>
		<ul>
			<li type="fruit" color="green">西瓜</li>
			<li type="vegetable" color="blueyellow">西兰花</li>
			<li type="meat">牛肉</li>
			<li type="meat hot">猪肉</li>
			<li type="drink hot">可乐</li>
			<li type="drink hot">雪碧</li>
			<li price="very-cheap">红酒</li>
			<li price="very">白酒</li>
		</ul>
	</body>
</html>

伪元素选择器

  • E::first-letter
    • 文本的第一个单词或字（如中文、日文、韩文等）
  • E::first-line
    • 文本第一行；
  • E::selection
    • 可改变选中文本的样式；
  • E::before和E::after
    • 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

":" 与 "::" 区别在于区分伪类和伪元素

标签显示模式-display

块标签/块元素 和 行内标签/行内元素

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

高度、行高、外边距以及内边距都可以控制。

宽度默认是容器的100%

行内元素(inline-level)

不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

默认宽度就是它本身内容的宽度。

行内块元素(inline-block)

在行内元素中有几个特殊的标签—— <img />、<input />、<td> ，可以对它们设置宽高和对齐属性，会称它们为行内块元素。

和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。

默认宽度就是它本身内容的宽度。

高度、行高、外边距以及内边距都可以控制。

显示模式转换

  • 块转行内：display:line；
  • 行内转块：display:block；
  • 块、行内元素转换为行内块：display:inline-block；

CSS书写规范

  • 选择器与{之间要有空格： .selector {}
  • 属性名之后的:不允许有空格，:与属性值之间必须包含空格 font-size: 12px;
  • 选择器规范：
  • 当一个rule包含多个selector时，每个选择器声明必须独占一行
    .post,
    .p,
    .div {}
  • 选择器的嵌套层级应不大于3级，位置靠后的限定条件应该尽可能精确 .nav li a {}
  • 属性定义后必须以分号结尾
avatar
文章
阅读
粉丝