目录
外部样式 创建一个单独CSS文件（.css）通过HTML中的link标签，把CSS文件引过来
内联样式 直接在元素里面使用style属性 把对应的CSS内容写进来
CSS基本语法规则：一个选择器，大括号，大括号里面有样式内容
CSS要在style里写 style放哪都可可以，但一般放在head内
具体的样式值，以键值对方式来体现的
键和值之间使用 ： 来分割
CSS注释为/* */
-
内部样式 使用style标签 把CSS嵌入到HTML中
-
外部样式 创建一个单独CSS文件（.css）通过HTML中的link标签，把CSS文件引过来
-
内联样式 直接在元素里面使用style属性 把对应的CSS内容写进来
内联样式的优先级更高
选择器
标签选择器 直接对div进行操作
div{
color: green;
font-size: 50px;
}类选择器 给特定div命名 再操作
<div class="one">这是绿色</div>
/* 类选择器需要在前面加. */
.one{
color: green;
font-size: 30px;
}id选择器
<div id="three">这是黑色</div>
#three{
color: black;
font-size: 30px;
}后代选择器
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol class="red">
<li class="one"></li>
<h3>1122</h3>
<li>4</li>
</ol>
.red .one{
color: green;
}
ul li{
color: green;
}
子选择器
<ol class="red">
<li class="one"></li>
<h3>1122</h3>
<li>4</li>
</ol>
ol>h3{
color: yellow;
}并集选择器
ul li,ol li{
color: aqua;
}伪类选择器
当鼠标移动到自己的位置时变色
<div class="weilei">
<p>伪类选择器</p>
</div>
/* 鼠标移到到该位置变色 */
.weilei:hover{
color: red;
}鼠标点击时变色
<div class="weilei">
<p>伪类选择器</p>
</div>
/* 鼠标点击变色 */
.weilei:active{
color: blueviolet;
}CSS属性
字体属性
字体
/* 字体 */
font-family: 微软雅黑;字体大小
/* 字体大小 */
font-size: 50px;字体粗细 范围100-900
/* 字体粗细 */
font-weight: 200;文本属性
文本颜色
有三种形式
直接写单词
color: red;rgb形式
color: rgb(0,0,0);rgba透明功能
第4个属性 范围是0-1 数值越小越透明
color: rgba(0, 2555, 0, 0.3);文本对齐
默认为左对齐
右对齐
/* 右对齐 */
text-align: right;居中
/* 居中 */
text-align: center;文本装饰
删除线
/* 删除线 */
text-decoration: line-through;文本缩进
/* 文本缩进 */
text-indent: 20px;行高
上文本和下文本的距离
/* 行高 */
line-height: 50px;背景属性
背景颜色
只在对应区域变色，而不是全部页面变色
background-color: red;背景图片
background-image: url(文件路径); /* 横着铺图片 */
background-repeat: repeat-x;
/* 竖着铺图片 */
background-repeat: repeat-y;
/* 不铺 */
background-repeat: no-repeat;设置图片坐标
/* 设置图片坐标 */
background-position: 0 200;设置图片背景大小
/* 关键字 */
background-size: cover
background-size: contain
/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto /* 不同于 background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;图片矩形属性
让四个小角边圆 越大月圆
border-radius: 10px;