CSS是一种分层设计的思想,把网页的颜色、大小、字体布局什么什么的全剥离到Style标签里面,这样一来
html中就只用关心提供什么内容就行了。
1、语法
第一种,通过选择标签,在style标签内设置内容:
<style>
p{
color:red;
}
</style>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
第二种,直接在元素上面增加style属性:
<p style="color:red">这是style为红色的</p>
<p>这是一个没有style的p</p>
2、选择器
选择器主要分为三种,分别是
one 元素选择器,通过标签名选择元素,直接打标签名就行。
two id选择器,通过自己设置的id选择元素,id是唯一的哒。格式为在设置的id前加上#
three 类选择器,如果有多个元素需要设置同样的css的时候,就可以给他们设置相同的类名,然后一次性设置好。
格式为设置的类名前加个 .
如果需要更准确的选择,可以用元素名加上类名的方式,进行精准选择。
3、注释
就像c语言的块注释一样 /* */
4、尺寸
就width呗 值可以是百分比 也可以是具体像素。
5、背景
background-color | 背景颜色 | 示例代码 |
background-image:url(imagepath); | 图片做背景 | 示例代码 |
url(background.jpg) | 本地测试 | 示例代码 |
background-repeat | 背景重复 | 示例代码 |
background-size: contain | 背景平铺 |
需要注意的,背景重复就是图片不够长,然后就不断重复,可以设置重复方向。
背景平铺就是把图片给拉开,容易失真。
6、文本
color | 文字颜色 | 三种方式,red,rgb(255.0.0),#00ffff |
text-align | 对齐 | 需要注意是块元素还是内联元素 |
text-decoration | 文本修饰 | 就是下换线,删除效果等 |
line-height | 行间距 | |
letter-spacing | 字符间距 | |
word-spacing | 单词间距 | |
text-indent | 首行缩进 | |
text-transform | 大小写 | uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写 |
white-space | 空白格 |
需要提醒的有:
text-align 文本对齐,首先要是块元素才有对齐的前提,比如div,默认的宽度是100%,而span标签是内联元素,默认的宽度是其文本的宽度,就看不出对齐的效果。
还有white-space ,几个值的区别:
white-space值:
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器,会换行。
nowrap 一直不换行,直到使用br
7、字体
font-size | 尺寸 | 数字或百分比 |
font-style | 风格 | normal 标准字体、italic 斜体 |
font-weight | 粗细 | 值:normal 标准粗细 bold 粗一点 |
font-family | 字库 | |
font | 把大小,风格,粗细,字库都写在一行里面 |
8、鼠标样式
cursor属性,当鼠标移动到该内容上面,鼠标变成啥样。
9、表格
one: 表格布局:
属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
two:表格边框
属性:border-collapse
separate:边框分隔
collapse:边框合并 这个好看点。
10、边框
one:边框风格
属性: border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
two:边框颜色
属性:border-color
three:边框的宽度
属性:border-width
four:都放在一起:
属性:border
值:颜色 风格 宽度
除此之外,每个内容的上下左右四个部分其实都有边框,可以分别设计四个方向的边框的属性:
<style>
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="alldirection">
四边都有边框
</div>
分别是top,left、bottom、right;
11、内边距
元素内边距
指的是元素里的内容与边框之间的距离,就是一个框框里面的内容怎么放的,
属性:
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左
12、外边距
元素外边距
指的是元素边框和元素边框之间的距离
属性:
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
13、超链状态
字面意思,超链接的状态
超链状态有4种
link - 初始状态,从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去,但是尚未弹起的时候
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<a href="http://www.12306.com">超链的不同状态</a>
然后还有超链接一般都有下划线,现在的网页上的超链接一般都没有下划线了,是这样设置的!
属性:text-decoration
值设置为none就行了。
text-decoration: none
14、隐藏元素
隐藏元素有两种方式
display:none;
visibility:hidden;
使用display:none; 隐藏一个元素,这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素,这个元素继续占有原空间,只是“看不见”
15、css文件
把冗长的css内容写到文件里面,就让html可读性更高啦,而且易维护,通常把文件命名为style.css
然后写上:
<link rel="stylesheet" type="text/css" href="style.css" />
就行啦。
16、优先级
style.css中 < <style>标签中 < style属性
如果样式上增加了!important,则优先级最高,甚至高于style属性