2.10总结

CSS:层叠样式表

HTML用来写出网页内容,CSS则用来找到HTML写出的东西,改变样式;

HTML写出的内容都是默认样式,字体种类、颜色、大小,图片宽高、边框等,CSS用来美化其外观,性能。

选择修改内容->选择器

标签选择器:

标签名 {
    属性:值;
    属性:值;
    ......
}

id选择器 #id名{.....}

class选择器 .class名{......}

通配符选择器 *{.......} 选择所有标签

CSS样式的三种写法:

  1. 内部样式表:将style标签写在head标签里:

<head>
    ...
    <style>
    css代码
    </style>
    ...
</head>
  1. 外部样式表:把CSS代码写在一个文件里,需要的时候用link导入

<head>
    ...
    <link rel="stylesheet" herf="css文件路径">
    ...
</head>

这样可以让网页源代码更整洁,并且一个CSS文件可供多个网页使用。

  1. 行内样式表:CSS代码写在标签内,如:

<p style='color:red; text-align:center; '>123</p>

文本样式

1.color : 颜色

color: blue;

color: #096;

color: rgb(130,200,50)

颜色有三种写法:

1.直接写预设好的颜色单词:red、 green 、pink、 gold

2.用十六进制颜色: #096 原谅绿、#6cf 天依蓝

3.用rgb值设置颜色: rgb(255,255,255)、rgb(0,0,0)、rgb(70,70,70)

2.font-size: 字的大小 (px像素 em字符单位)

font-size: 70px;

3.font-family: 设置字体(宋体/微软雅黑)

font-family:'Microsoft YaHei' ; (微软雅黑)

font-family:'微软雅黑';(中文也行)

4.font-weight: 字的粗细 100-1000

font-weight: 1000;

5.font-style: 字的样式(倾斜)

font-style: italic;

6.text-indent: 文字缩进

text-indent: 2em;(缩进两个默认字符大小)

7.text-align: 设置文本对齐

text-align: center;(left:左 center:中 right:右)

8.text-decoration: 设置文本样式(下划线)

text-decoration: uderline; 下划线

overline; 上划线

line-through; 删除线

none; 无

9.line-height: 设置文本的上下位置(行高)

line-height: 30px;

背景样式:

1.background-color : 设置背景颜色

background-color: #096; // 设置方式和color一样

2.background-image : 设置背景图片

background-image: url(图片路径);

3.background-position: 设置背景位置

left左 center中 right右 top上 bootom下

0 0 --> 默认左上

4.background-size : 设置背景大小

background-size: cover; // 缩放

5.background-repeat: 设置背景图片是否重复

background-repeat: no-repeat;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值