CSS语法
selector{property:value}
1.CSS选择器
选择器主要分为三种
元素选择器：通过标签名选择元素
id选择器：一个元素的id应该是唯一的，另一个元素不应该重复使用
类选择器：当多个元素都使用相同的css的时候，可以使用类选择器
更准确的选择
同时根据元素名和class进行选择，例如p.blue
<style>
p.blue{
color:blue;
}
</style>
<p class="blue">class=blue的p></p>
<span class="blue">class=blue的span</span>
2.CSS注释
注释style样式，以/开始以/结束
例如：
<style>
/*设置所有的p元素中的内容为红色*/
p{
color:red
}
</style>
<p>红色的p</p>
3.CSS尺寸
设置元素的尺寸
属性为width，值为百分比或者像素
例如：
<style>
p#percentage{
width: 50%;
height:50%;
background-color: pink;
}
p#pix{
width: 180px;
height: 50px;
background-color: green;
}
</style>
<p id="percentage">按尺寸设置尺寸50%宽50%高</p>
<p id="pix">按像素设置尺寸180px宽50px高</p>
4.CSS背景
设置背景色
属性名为background-color
属性值为：1.预定义的颜色，例如red、blue等。2.rgb格式，例如rgb(250,0,255)。3.16进制格式，例如#00ff00。
设置图片背景
例如：
<style>
div#test{
background-image: url(file:///Users/chenyangyang/Downloads/example.gif);
width: 400px;
height: 100px;
}
</style>
<div id="test">设置背景图................</div>
设置背景重复
设置属性background-repeat，值可以为：
repeat：水平垂直方向都重复
repeat-x：只有水平方向重复
repeat-y：只有垂直方向重复
no-repeat：无重复
例如：
<style>
div#test{
background-image: url(file:///Users/chenyangyang/Downloads/example.gif);
width: 400px;
height: 100px;
background-repeat: no-repeat;
}
</style>
<div id="test">设置背景图................</div>
设置背景平铺
属性为background-size
值为contain
通过拉伸实现，可能会失真。
例如：
<style>
div#test{
background-image: url(file:///Users/chenyangyang/Downloads/example.gif);
width: 400px;
height: 200px;
background-size: contain;
}
</style>
<div id="test">设置背景图................</div>
效果如下：
5.CSS文本
设置文字颜色
属性名color
属性值有3种方式：1.预定义的颜色，例如red、blue等。2.rgb格式，例如rgb(250,0,255)。3.16进制格式，例如#00ff00。
设置对齐方式
属性名text-align
属性值有left、right、center
div是块级元素，其默认宽度为100%，所有文本有对齐的空间前提。
但是span就看不出右对齐的效果，因为span是内联元素，其默认的宽度就是文 本内容的宽度。
设置文本修饰
属性名：text-decoration
属性值：overline、line-through、underline、blink、none
设置行间距
属性名：line-height
属性值：数字或百分比
设置字符间距
属性名：letter-spacing
属性值：数字
设置单词间距
属性名：word-spacing
属性值：数字
设置首行缩进
属性名：text-indent
属性值：数字
设置大小写
属性名：text-transform
属性值：uppercase（全部大写）、capitalize（首字母大写）、lowercase（全部小写）
设置空白格
属性名：white-space
属性值：normal（默认，多个空白格或者多个换行符会被合并成一个空白格）、pre（有多少个空白格，就会显示多少个空白格，相当于pre标签，如果长度超过父容器也不会换行）、pre-wrap（有多少个空白格，就会显示多少个空白格，相当于pre标签，如果长度超过父容器会换行）、nowrap（一直不会换行）6.CSS字体
设置字体大小
属性名：font-size
属性值：数字或者百分比
设置字体风格
属性名：font-style
属性值：normal（标准字体）、italic（斜体）
设置字体粗细
属性名：font-weight
属性值：normal（标准粗细，默认值）、bold（粗）、数字
设置字库
属性名：font-family
属性值：default（默认字库）、Times New Roman、Arial等
合并起来声明
属性名：font
属性值：例如font：italic bold 30px “Times New Roman”
6.鼠标样式
属性名：cursor
属性值：default、auto、crosshair、pointer、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、w-resize、text、wait、help、not-allowed。
7.CSS表格
设置表格布局
属性名：table-layout
属性值：automatic（单元格大小由td的内容宽度决定）、fixed（单元格大小由td上设置的宽度决定）。
设置表格边框
属性名：border-collapse
属性值：separate（边框分隔）、collapse（边框合并）
8.CSS边框
设置边框风格
属性名：border-style
属性值：solid（实线）、dotted（点状）、dashed（虚线）、double（双线）
设置边框颜色
属性名：border-color
属性值：red，#ff0000，rgb(255,0,0)
设置边框宽度
属性名：border-width
属性值：数字
合并在一起设置
属性名：border
属性值：颜色 风格 宽度
设置只有一个方向上有边框
可以通过定制位置，只给一个方向设置边框风格，颜色和宽度
例如：
border-top-style:solid
border-top-color:red
corder-top-width:50px
块级元素和内联元素的边框区别
块级元素div默认是占用100%宽度
常见的块级元素有div、p、h1等
内联元素span的宽度由内容的宽度决定
常见的内联元素有span、input、a等
9.CSS内边距
元素内边距是指元素里面的内容与边框之间的距离
属性有padding-left（左边距）、padding-right（右边距）、padding-top（上边距）、padding-bottom（下边距）、padding（上 右 下 左）
padding值中如果只有一个值，则四个都取这个值，如果有两个值，则下、左分别和这两个值相同，如果只有三个值，则左边值和第二个值相同
10.CSS外边距
元素外边距是指元素的边框和元素的边框之间的距离
属性有margin-left（左外边距）、margin-right（右外边距）、margin-top（上外边距）、margin-bottom（下外边距）、margin（上 右 下 左）
11.CSS边框模型
真正决定一个元素的表现形式，是由边框模型决定的
盒子模型
12.CSS中超链接状态
超链接一共有四种状态，分别是：
1.link：初始状态，表示从未被访问过
2.visited：已访问过
3.hover：鼠标停留在超链接上方
4.active：鼠标左键击下，但尚未弹起的时候
去除超链接的下划线
默认情况下，超链接是有下划线的，去掉时设置属性text-decoration:none
13.CSS中隐藏
隐藏元素有两种方式
1.display：none，这个元素将不再占有原来的空间
2.visibility：hidden，只是看不到，元素还继续占有原来的空间
14.CSS文件
将css样式直接写到html中，一旦样式变多的时候，就难以维护，可以把css样式写在一个独立的文件中。
然后在html中引用该css文件，使用例如这样引用css文件<link rel="stylesheet" type="text/css" href="/study/style.css">
15.CSS优先级
当style标签和外部文件style.css中的 样式重复时，优先使用排在后面出现的样式。
当style标签上和style属性发生冲突的时候，优先使用style属性
如果在样式上加!important，则该样式具有最高的优先级，甚至高于style属性。
网友评论