前端学习笔记（二）CSS基础

同目录下创建文件myccs.css,在该文件下进行编写样式
在html的标签中，添加引用

h1,h2,a,p{
	color: red;
	font-size: 100px;
	...
	...
}
body{
	color: blue;
}

注意：以最近的style为准

派生选择器

红色

绿色

li strong{  #中间用空格间隔
	color: red;
}
strong{
	color: green;
}

选择器

hellow

#pid {
	color: red;
}

增加派生选择器

hellowHELLOW

#pid a{
    color: red;
}

属性选择器

AAAAA

BBBBB

[title]{
    color: red;
}
[title=te]{
    color: blueviolet;
}

背景

在CSS文件中

body{
    background-color: blueviolet;   #背景颜色
    background-image: url("images/123.jpg"); #背景图片
    background-position: 100px 200px;	#图片放置位置
    background-repeat: no-repeat;  #图片是否重复
    background-attachment: fixed;  #图片是否固定
    background-size: 100px 200px;  #图片大小
}

文本

body{
    color: red;
    text-align: left;
    text-indent: 2px;
    text-transform: capitalize[lowercase][uppercase];#每个单词首字母大写 全部小写/大写
    text-shadow: 100px 100px 1px #00FF00; #文本阴影 距x 距y 阴影厚度 颜色
    width: 50px;		#自动换行
    text-wrap: normal;  #自动换行
}

字体

body{
    font-size: 20px;   		#大小
    font-family: 华文行楷;	#类型
    font-weight: bolder;	#加粗
    font-style: oblique;	#斜体
}

链接

a:link{							#未点击是颜色
    color: darkgrey;
    text-decoration: none;		#去掉链接的下划线
    background-color: chartreuse;#背景颜色
}
a:hover{						#鼠标放置到链接时的颜色
    color: yellow;
}
a:active{						#点击时的颜色
    color: greenyellow;
}
a:visited{						#点击后的颜色
    color: blue;
}

列表

ul li{
    list-style-type: lower-greek;    		#小写希腊字母序号
    list-style-image: url("images/123.jpg");#添加图片
    
}

表格

#qwe,tr,th,td{
    border: 2px solid #0000dd; 	#边框 粗细 实线 颜色
    text-align: center;			#居中
    background-color: bisque;	#背景颜色
}
#qwe{
    width: 400px;				#表格宽度
    height: 400px;				#表格高度
    border-collapse: collapse;	#合并边框
}

轮廓

p{
    outline-style: double;			#轮廓线性
    outline-color: #ff353a;			#轮廓颜色
    outline-width: 10px;			#轮廓粗细
}

定位