行内样式:在标签的后面添加样式
font-family: Arial,sans-serif,宋体; 依次查找字体，如果有就使用，没有就往下找；如果都没有使用用户浏览器的默认字体
内部样式
在head标签中添加
<style>
选择器{属性:属性值; 属性:属性值;…}
</style>
外部样式:外部样式表可以重复使用
使用link标签链接外部样式文件，href后面跟上外部样式文件的路径
<link rel=”stylesheet” href=”文件路径”>
id选择器
id 不能重复，在同一个HTML页面中，id必须是唯一的
css选择器 标签选择器 类选择器
import外部样式
link和@import都可以引入外部样式，但是@import效率较低，还有其他一些缺点，一般不是用@import导入外部样式文件。而是推荐使用link的方式
<style type=”text/css”>
@import url(css/css1.css);
</style>
选择器
类选择器语法：.类名{属性:属性值;属性:属性值;….}，前面的小圆点不要漏掉
id选择器语法： #id名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
使用星号通配符来消除HTML中的外边距和内边距
font-size
font-size:2em;/*相对大小，相对于父元素的2倍*/
font-weight 字体加粗
normal—-不加粗
bold——加粗
400等同于normal，而700等同于bold
font-weight:900;
font-style
font-style:italic;/*italic – 文本倾斜显示*/
font-style:oblique;/*oblique 文本倾斜显示*/
字体的综合设置
font属性用于对字体样式进行综合设置
基本语法如下：
选择器{ font: font-style font-weight font-size/line-height font-family;}
使用font，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性之间以空格隔开
不需要设置的属性可以省略，但必须保留font-size和font-family属性，否字font属性不起作用
line-height行高
行高设置为比字体大8个像素左右
text-indent首行缩进
text-indent属性用于设置首行文本的缩进，1em就是一个汉字的宽度，可以为负数，负数表明悬挂缩进
text-indent 还可以设置为负值。利用这种技术，可以实现许多有趣的效果，列如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：p {text-indent: -5em;}不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，提议针对负缩进再设置一个外边距或一些内边距：p {text-indent: -5em; padding-left: 5em;
边框
border-top-style:dotted;/*上边框 dotted 点线*/
border-top-color:dodgerblue;/*上边框颜色 红色*/
border-top-width:5px; /*上边框宽度5px*/
border-right-color:green;
border-right-width:2px;
border-right-style:dashed;/*dashed虚线*/
border-bottom:2px solid gold;
border:2px solid darkgreen;/*四条边框一起设置 2px 实线 深绿色*/
border-right:5px dashed blue;/*设置右边框*/
背景
background-image:url(“https://p1.ssl.qhimg.com/dr/220__/t01f97233dce16e4fa6.jpg”) ;
no-repeat不重复 repeat-x 在x轴上重复 repeat-y 在y重复
background-repeat:repeat-y;
背景:图片地址 背景颜色蓝色 不重复 距离左侧10px 顶部50px
background:url(“https://p1.ssl.qhimg.com/dr/220__/t01f97233dce16e4fa6.jpg”) blue no-repeat 10px 50px;
table表格
border-collapse: collapse;/*将表格边框合并为单一边框*/
列表样式
把图像设置为列表中的项目标记：
list-style-image:url(“img/icon1.jpg”);
list-style-position:outside; (inside outside)
list-style-type: circle;
circle小圆圈 lower-latin拉丁字母 lower-roman小写的罗马数字 upper-roman大写的罗马数字 none不显示
有道云笔记
暂无评论内容