【Css】

Css

CSS( Style Sheets) 主要用于美化样式。
CSS通常称为CSS样式表或层叠样式表(级联样式表)

(1)、内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

(2)、行内样式表

#### 内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

(3)、外部样式表

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中
<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。  

rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)
外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)

CSS样式规则

1.选择器用于指定CSS样式的HTML对象,花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

可以用段落和表格的对齐的演示。

CSS字体属性

(1)、font-size:字号大小
(2)、font-family:字体
(3)、font-weight:字体粗细
(4)、font-style:字体风格

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会显示斜体的字体样式。

oblique:浏览器会显示倾斜的字体样式。

font:综合设置字体样式 (重点)
选择器{font: font-style  font-weight  font-size/line-height  font-family;}

CSS外观属性

(1)、color:文本颜色

十六进制,如#FF0000 RGB代码,如红色可以表示为rgb(255,0,0)

(2)、line-height:行间距
(3)、text-align:水平对齐方式
(4)、text-indent:首行缩进
(5)、text-decoration 文本的装饰
none默认。定义标准的文本。
underline定义文本下的一条线。下划线 也是我们链接自带的
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
(6)、letter-spacing 文字间距

基础选择器

  • (1)、标签选择器(元素选择器)

    标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 或者

    元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

  • (2)、类选择器

    类选择器使用**“.”(英文点号)**进行标识,后面紧跟类名

    .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    标签调用的时候用class=“类名

    类选择器的优势:

    1.可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

    小技巧:

    1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器。 3.不要纯数字、中文等命名,尽量使用英文字母来表示。

  • (3)、多类名选择器

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值