1.什么是css
<style>填写内容</style>
<style type="text/css"> { 内容 } </style>
2.样式的定义
选择器 {属性:属性值;属性:属性值;}
选择器的分类:
-
标签选择器:选择器的名称是某个标签,当前页面里所有的该标签自动应用选择器的样式
-
id选择器:通过id属性引用的标签中才会起作用
例:#pp{color: red;}
-
类选择器:通过class属性引用的标签中才会起作用
例:.ppp{color: blue;}
<head> </head> <style type="text/css"> p{} #pp{color: red;} .ppp{color: blue;} </style> <body> </body>
要注意的是样式的定义要在</head>和<body>之间
3.常用样式
文本样式
text-decoration: 设置文本线的位置,如果是链接可以设置为none;
text-align: 设置文本的对齐方式;
<style type="text/css"> p{ text-align: center;color: aqua;} a{text-decoration: none;} </style>
字型样式
font-family: 规定元素的字体系列;
font-size: 设置字体的大小;
font-style: 属性定义字体的风格;
font-weight: 规定字体的粗细;
<style type="text/css"> .pp{ font-family: "黑体";font-size:32;font-style: italic; font-weight: 100; } </style>
间距样式
line-height: 设置以百分比计的行高;
值 | 描述 |
---|---|
normal | 默认。设置合理的行间距。 |
number | 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 |
length | 设置固定的行间距。 |
% | 基于当前字体尺寸的百分比行间距。 |
letter-spacing: 设置 h1 和 h2 元素的字母间距;
值 | 描述 |
---|---|
normal | 默认。规定字符间没有额外的空间。 |
length | 定义字符间的固定空间(允许使用负值)。 |
word-spacing: 规定段落中的字间距;
值 | 描述 |
---|---|
normal | 默认。定义单词间的标准空间。 |
length | 定义单词间的固定空间。 |
颜色设置
color属性对应的值可以为:
-
英文单词 red,green,blue
-
3位16进制 #0f0;( 0-9,a-f)
-
6位16进制#00ff00;
<style> p{color: aqua;} #ppp{color: rgb(112, 231, 33);} .pp{color: blue;} </style>
注意 :
bgcolor、background-color和color区别
bgcolor:是html标签的属性,body 和table 来设置页面或者表格的背景颜色
background-color:是css样式中用来设页面或者表格的背景颜色
color: 是css样式中用来设置文本的颜色
在table里的样式应用
border: border-width、border-style 以及 border-color 的简写属性
可以按顺序设置如下属性:
-
border-width
-
border-style
-
border-color
如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。
border-width: 设置四个边框的宽度;
值 | 描述 |
---|---|
thin | 定义细的边框。 |
medium | 默认。定义中等的边框。 |
thick | 定义粗的边框。 |
length | 允许您自定义边框的宽度。 |
inherit | 规定应该从父元素继承边框宽度。 |
border-style: 设置下边框的样式;
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
border-color: border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
请看下面的例子:
例子 1
border-color:red green blue pink;
-
上边框是红色
-
右边框是绿色
-
下边框是蓝色
-
左边框是粉色
例子 2
border-color:red green blue;
-
上边框是红色
-
右边框和左边框是绿色
-
下边框是蓝色
例子 3
border-color:dotted red green;
-
上边框和下边框是红色
-
右边框和左边框是绿色
例子 4
border-color:red;
-
所有 4 个边框都是红色
border-right-width: 设置元素的右边框的宽度 ;
border-right-color: 设置元素的右边框的颜色;
border-right-style: 设置元素右边框的样式;
padding 属性
设置 p 元素的 4 个内边距;
padding-top:设置 p 元素的上内边距 ;
padding-left: 设置 p 元素的左内边距;
padding-right: 设置 p 元素的右内边距;
padding-bottom: 设置 p 元素的下内边距;
list-style属性
把图像设置为列表中的列表项目标记
-
list-style-image: 属性使用图像来替换列表项的标记
值 描述 inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 -
list-style-position: 规定列表中列表项目标记的位置
值 描述 URL 图像的路径。 none 默认。无图形被显示。
<style> li{list-style-position: outside; list-style-image: url("/12-19/30.jpg");} </style> <body> <ul> <li>hello</li> <li>hello</li> <li>hello</li> </ul> </body>
背景颜色
background-color: 属性设置元素的背景颜色
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
盒子模型
border:指盒子的边框
margin :指当前容器到外边框的距离
padding:指容器内的内容到容器边框的距离