CSS

CSS介绍

CSS发展原因

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

CSS初识

CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体,大小啊,对齐方式,颜色等)

1.选择器用于指定CSS样式作用的HTML对象,{}内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示

font字体

font-size:字号大小

用于设置字号,可以使用相对长度,也可以使用绝对长度单位。
一般使用px

font-family:字体

用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
p{ font-family:"微软雅黑";}

eg:h1{
font-family:“微软雅黑”;
}
注:

  • 现在网页中普遍使用14px+。
  • 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
  • 各种字体之间必须使用英文状态下的逗号隔开。
  • 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
  • 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: “Times New Roman”;。
  • 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称,可以直接写中文。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。因此:

  • 使用英文来替代,比如 font-family:“Microsoft Yahei”(微软雅黑)
  • 直接使用 Unicode 编码,比如font-family: “\5FAE\8F6F\96C5\9ED1”(微软雅黑)
字体名称英文名称Unicode 编码
宋体SimSun\5B8B\4F53
新宋体NSimSun\65B0\5B8B\4F53
黑体SimHei\9ED1\4F53
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312
隶书LiSu\96B6\4E66
幼园YouYuan\5E7C\5706
华文细黑STXihei\534E\6587\7EC6\9ED1
细明体MingLiU\7EC6\660E\4F53
新细明体PMingLiU\65B0\7EC6\660E\4F53

font-weight:字体粗细

normal:正常大小,400
bold:粗体,700
字体大小在100~900(必须为100的整数倍)

注释:

在这里插入图片描述

font-style字体风格

normal: 正常字体
italic: 倾斜字体
oblique:人为倾斜字体
(一般使用此方法让倾斜文字变不倾斜)
在这里插入图片描述

字体综合设定

选择器(font: font-style font-weight font-size/line-height(行高) font-family;)

  • 使用font属性时,必须按照上面的语法格式顺序书写,不可更换顺序,各个属性以空格隔开
  • 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family。否则font属性不起作用。
  • 在这里插入图片描述

在这里插入图片描述

css基本选择器

调试

使用调试工具chrome;

在这里插入图片描述

  1. 使用f12/CTRL+shift+l,左边是html,右边是css;
  2. 点开左边结构,箭头指向的6就是错误行数
  3. 图3 就是改错之后,可以点击颜色图标去修改字体颜色
  4. ctrl+滚轮或+,-可以修改代码大小在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

选择器(选择符)

标签选择器(元素选择器)

标签名{属性1:属性1的值;属性2:属性2的值;属性3:属性3的值;}
更改某一类标签,但不可差异化更改

体会类选择器

.类名{属性1:属性1的值;属性2:属性2的值;属性3:属性3的值;}调用时使用 class=“类名”
在这里插入图片描述
在这里插入图片描述

命名规范

  • 长名称或词组可以使用-来为选择器命名。
  • 不建议使用"_"下划线来命名。
  • 不要用纯数字或者中文来命名。

多类名选择器

  • 样式显示效果跟HTML元素中的类名先后顺序无关,受css样式书写的上下顺序有关。
  • 各个类名中间用空格隔开。
    在这里插入图片描述

ID选择器

ID选择器和类选择器使用方法相同
.id {属性1:属性1的值;属性2:属性2的值;属性3:属性3的值;}

在这里插入图片描述

ID选择器和类选择器的区别

  • 类选择器可以重复多次使用的(类似于人名)
  • ID选择器是唯一的,只能使用一次(类似于身份证号).

通配符选择器(适用范围最广)

*{属性1:属性1的值;属性2:属性2的值;属性3:属性3的值;}
星号指的是所有的意思。
在这里插入图片描述

链接伪类选择器

用于向某些选择器添加特殊的效果(用:表示)

  • :link /* 未访问的链接 */
  • :visited /* 已访问的链接 */
  • :hover /* 鼠标移动到链接上 */
  • :active /* 选定的链接 ,我们点过的链接*/
  • lvha顺序尽量不要颠倒
  • 在这里插入图片描述

链接伪类的简写方式

一般记这个就ok

在这里插入图片描述

结构伪类选择器

  • :first-child :选取属于其父元素的首个子元素的指定选择器

  • :last-child :选取属于其父元素的最后一个子元素的指定选择器

  • :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型

  • :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数
    n 可以是数字、关键词或公式

    • :nth-child(odd/2n+1/2n-1):选择所有的奇数
    • :nth-child(even/2n):选择所有的偶数,n是从0开始算

    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

目标伪类选择器

target目标伪类选择器 :选择器可用于选取当前活动的目标元素
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页