CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
以下是个人学习记录的一些笔记
h1{color:red;font-size:14px}
h1是一个元素 样式{}包围
大括号里面是属性 用：对属性进行赋值 分号隔开不同属性
赋值如果大于一个单词，需要用引号，例如{font-family:"sans serif"}
在html中引入css
<link href="" type="" rel="">
选择器分组
h1,h2,h3{
? color:red;font-size:14px
}
高级语法
继承
body {color:red;}
如果不单独设计样式，body里面的元素都会继承body里面的这个属性
派生选择器
li strong{color:red;}空格隔开
id选择器
<p id="pid"></p>
井号键pid {具体属性}
类选择器
<p class="classname"></p>
.classname {具体属性}
属性选择器head中
<style type="text/css">
[title]{color:blue;}
[title="t"]{color:red;}
</style>
body中
<p title="1">1</p>显示为blue
<p title="t">1</p>显示为red
常用属性
background-attachment 背景图像是否随页面滚动
background-color 设置元素的背景颜色
background-image 把图片设置为背景
background-position 设置图片的起始位置
background-repeat 设置图片是否及如何重复
background-size 规定图片的尺寸
body {
? background-image:url("图片")；
? background-repeat:no-repeat;
}
color 颜色
text-indent 首行缩进
text-transform 设置字母
text-shadow 阴影效果
word-wrap 规定文本的换行规则
p{
? color:blue;
? text-indent: 0em;
? text-transform:多种属性值 看需要;
text-shadow:5px 5px 5px #ff0000;
}
{
? font-size:40px;
? font-family:fantasy;
}
自定义字体
@font-face{
? font-family:myfont;
? src:url();
}
div{
? font-family:myfont;
}
a:link{
? text-decroation:none//去掉下划线
? -webkit-margin-before: 1rem; -webkit-margin-after: 1rem; margin: 0.8em 0px; position: relative; width: inherit; color: rgb(51, 51, 51); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; white-space: pre-wrap;">}//未被访问的链接
a:visited{
}//用户已访问的链接
a:hover{
}//指针位于链接上方
a:active{
}//链接被点击
{
? list-style-type: ; //列表类型
? list-style-image: ; //列表项图标
}
{
? border:1px solid color; //设置边框的颜色大小
? border-collapse:collapse; //将边框合并为一条线
? text-align: ；对齐方式
?
}
用来突出元素
outline-color: //设置轮廓颜色
outline-style: //设置轮廓风格
outline-width: //设置轮廓宽度
position{
? width: ;
? height: ;
?
? position: absolute;//不占位置
? left:
? top:
}
{
? float:left; //向左浮动
? float:right; //向右浮动
? clear:left；//清除左浮动
? clear:right; //清除右浮动
}
基本属性
margin 外边距
border 边框
padding 内边距
content 内容
{
? padding: ;//所有
? padding-left: ;
? padding-right: ;
? padding-top: ;
? padding-bottom: ;
}
{
? border-style: ;//边框样式
? //同样可以有四个位置单独改变
? border-width: ;//宽度
? //也可以四个位置单独改变
? border-color: ;
? //也可以四个位置单独改变
}
border-radius: px;//圆角边框
box-shadow: ;//边框阴影
跟内边距相似
{
}
了解
用来设计网页整体的框架
*是通配符，所有的都会被影响
margin
{
? margin-left:auto;
? margin-right:auto;
? //相当于居中操作
}
position
{
? position:absoulute;
? right:0px; //居右,其他同理
}
float
{
? float:left;向左浮动 //居左
? float:right;向右浮动 //居右
}
width height基本高度，宽度
line-height:200% //二倍正常高度
还有最大最小宽高max ,min
{
? cursor: //各种类型
? visibility: //设置元素是否可见
}
li{
? display:inline //处于一行
}
基本操作
例如h1,h2{}
*{}通配符
.class{}
结合选择器a.class{}
多类选择器.class.class{}
id选择器 #name{}
ID只能在文档中使用一次，类可以多次使用
ID选择器不能结合使用，使用js时会用到id
在头部
<style>
? [title]{
? color: ;
}
? [title~="title"]
{
? color: ;
}
</style>
body里面
<p title="">hello</p>
<p><strong>hello <i>666</i></strong> world</p>
样式里面写
p strong{}
p o{}
<p><strong>hello <i>666</i></strong> world</p>
样式里面写
p>strong{}
p>strong>i{}
紧接在一个元素后的元素，且二者有相同父元素
<li></li>
<li></li>
<li></li>
后面两个li
li+li{}
原文：https://www.cnblogs.com/tyx666/p/10557888.html