CSS基础总结(一)

一篇教会你css基础语法

CSS简介

html局限性

HTML 是网友的骨架,只关注内容的语义。例如<h1>表示大标题,<p>表示段落。

早期的时候,HTML 只能做一些简单的样式,网页非常丑,而且使 HTML 代码臃肿。

css网页的美容师

CSS 是 层叠样式表(Cascading Style Sheets)的简称。

CSS 也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。·

HTML 呈现结构,CSS 决定样式,结构与样式分离。

CSS语法规范

CSS规则由两部分组成:选择器和一条或多条声明。

CSS代码风格

  • 展开式
  • 选择器,属性名,属性关键字全部小写
  • 空格规范

CSS基础选择器

选择器分为基础选择器和复合选择器两大类。

  • 基础选择器由单个选择器组成。
  • 基础选择器包括:标签选择器、类选择器、id 选择器和通配符选择器。

标签选择器

直接用 HTML 标签名作为选择器,按标签名称分类,为页面某一类标签指定统一的 CSS 样式。

 h1{
            color: pink;
            background-color: aliceblue;
            font-size: large;
        }
  • 优点 标签选择器可以把某一标签全部选择出来,快速为同类型标签设置统一样式。

  • 缺点 不能设置差异化样式,只能选择全部当前标签。

类选择器

差异化选择不同标签,单独选一个或者某个标签。

语法

使用 class 属性来调用 class 类,样式点定义,结构类调用,一个或多个,开发最常用。

注意
  1. 类选择器用 . 标识,紧跟类名。
  2. 小写,使用 - 连接单词。
  3. 不要用纯数字、中文。
  4. 命名有意义
<p class="class-name1"></p>

类选择器多类名

类名间用空格分开

<p class="class-name1 class-name2"></p>

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器,用 # 来定义。

  #pink{
            color: green;
            background: blue;
            font-size: large;
        }

样式 # 定义,结构 id 调用,别人切勿使用。

  1. 类选择器可以被多个元素调用。
  2. id 选择器只能允许一个标签调用。
  3. 类选择器使用的较多,id 选择器用于唯一特性的标签。

通配符选择器

语法

*{
			color: green;
            background: blue;
            font-size: large;

}
  • * 定义通配符选择器,选取页面中所有标签。
  • 不需要调用,自动给所有标签。
  • 特殊情况使用

基础选择器总结

基础选择器作用特点使用情况用法
标签选择器选中所有相同标签不能差异化选择较多p{color:red;}
类选择器选出一个或多个标签可以根据需求选择较多.nav {color: red;}
id 选择器一次只能选出一个标签一个 id 属性在页面中只能出现一次一般配合 js 使用#nav {color: red;}
通配符选择器选择所有标签元素选择的太多,有部分不需要特殊情况使用* {color: red; }
  • 每个选择器都有自己的使用场景,都要掌握。
  • 如果是修改样式,类选择器是使用最多的。

CSS字体属性

字体系列

CSS 使用 font-family 属性定义文本字体系列。 尽量使用默认字体,保证不同浏览器的兼容性。

body {
  font-family: "微软雅黑", Arial, Helvetica, sans-serif;
}

  • px 大小是我们网页常用单位
  • 谷歌浏览器默认是 16px
  • 可以给 body 指定整个页面文字大小

字体粗细

CSS 使用 font-weight 属性设置字体粗细

p {
  font-weight: 700;
}

文字样式

CSS 使用 font-style 属性设置文本风格。

p { font-style: italic; }
属性值描述
normal正常显示
italic斜体

字体复合属性写法

将各种字体属性写在同一选择器下,节约代码。

规则

严格遵守顺序,且 font-siezefont-family 必须有。

body {
  font: font-style font-weight font-size/line-hight font-family;
}

字体属性总结

字体属性表示注意
font-size字号单位是 px
font-family字体按照团队约定来写
font-weight字体粗细400=normal,700=bold
font-style字体样式italic,normal,常用 normal
font属性连写顺序不能变,字体和字号属性必须有

CSS文本属性

CSS Text(文本)属性定义文本外观,比如颜色、对齐、装饰、缩进、行间距等。

文本颜色

color 属性定义文本颜色。

div {
  color: red;
}

对齐文本

text-align 属性用于设置元素文本内容的对齐方式。

div {
  text-align: center;
}

属性值解释
left左对齐(默认)
right右对齐
center居中对齐
装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

text-decoration: underline;
属性值描述
none默认,无装饰(最常用)
underline下划线,a 标签自带(常用)
overline上划线。(几乎不用)
line-through删除线。(不常用)
文本缩进

text-indent定义段落首行缩进。

p {
  text-indet: 5px;
}

行间距

line-height 设置行间的距离,行间距=文本高度+上间距+下间距

CSS引用方式

按照 CSS 书写的位置不同,CSS 样式表可以分为三大类:

  1. 行内样式表(行内式)
  2. 内部样式表(嵌入式)
  3. 外部样式表(链接式)
内部样式表

将 CSS 代码写在 HTML 页面内部,单独放在一个 <style> 标签中。

  • <style> 理论上可以放在 HTML 文档中任何一个地方,一般放在 <head> 标签中。
  • 方便控制整个页面中的元素样式。

练习时使用,实际开发不用。

行内样式表

行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式,适合修改简单样式。

<div style="color: red; font-size: 12px">行内样式表</div>

  • 设置当前标签样式
  • 书写繁琐,不推荐大量使用。
外部样式表

实际开发中都是外部样式表,适用于样式比较多的情况。 核心:样式单独写到 CSS 文件中,再将 CSS 文件引入到 HTML 页面中。

<link rel="stylesheet" href="css文件路径" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我想去拉萨。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值