CSS 简介及书写规则—行内样式

CSS 简介及书写规则—行内样式CSS简介 CSS 英文全称【cascading style sheet】 汉语意思:层叠样式表 作用:CSS 用于美化网页,还可以进行网页布局 【前端三层是什么?】 前端三层分为:HTML(结构层)CSS(样式层)JavaScript(行为层) 总结: CSS 前端人当中称之为“样式层”,可以对网

CSS简介

  CSS 英文全称【cascading  style  sheet】   汉语意思:层叠样式表

  作用:CSS 用于美化网页,还可以进行网页布局

  【前端三层是什么?】

  前端三层分为:HTML(结构层)CSS(样式层)JavaScript(行为层)

  CSS 简介及书写规则---行内样式

  总结:

  CSS 前端人当中称之为“样式层”,可以对网页进行美化【比如文字设置颜色、设置文字大小、设置文字字体】,可以进行网页的页面布局

书写规则

CSS (层叠样式表,简称样式)根据在网页中书写的位置不同,分为3种:行内样式、内嵌样式和外链样式

1.1 行内样式写法:

  • 任意标签【容器级别标签和文本级别标签】都可以添加行内样式
  • 需要在双标签、单标签的开始标签位置书写
  • 在开始标签名字后面,别忘记有空格,给这个标签添加一个style(英文:样式,风格)属性
  • style属性值得写法:样式属性名字 + :+ 样式属性的属性值 + ;
  • 别忘记在样式属性值后面加一个分号,代表当前这一个样式设置完毕,进行下一个样式属性
  • 一个标签可以同时设置多个样式,多个样式之间用分号隔开

  示例如下:

  CSS 简介及书写规则---行内样式

  效果如下:

  CSS 简介及书写规则---行内样式  

1.2 常用的行内样式

在制作网页的时候,我们经常和网页中的文字打交道,比如设置文字颜色、文字大小、文字的字体

1.2.1 color

  • 主要作用:设置文字颜色
  • 属性值:英文单词或16进制的数字

  1、英文单词

    注:一个样式一般只书写一次,如果书写多次,右侧覆盖左侧样式

  示例如下:

  CSS 简介及书写规则---行内样式

  效果如下:

  CSS 简介及书写规则---行内样式

 

  2、16进制数字

 

  • 生活中比较常用的是10进制数字(逢十进一)而16进制的数字是逢16进一
  • 组成:0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f(英文不区分大小写)
  • 16进制的颜色表示不用记忆,参考W3C 网站即可
  • 链接:https://www.w3school.com.cn/html/html_colors.asp
  • 如果 color 样式的属性值为16进制数字,书写格式以 # 开始,以分号结束

  示例如下:

  CSS 简介及书写规则---行内样式

  效果如下:

  CSS 简介及书写规则---行内样式

 

1.2.2 font-size

  • font-size :字体大小
  •  主要作用:设置文字大小
  • 属性值:数字 + px单位(px– pixel  像素)

  示例如下:

  CSS 简介及书写规则---行内样式

  • 谷歌浏览器,一般标签默认文字大小是16px,最小字体是12px,如果比12px 小,系统默认显示12px
  • IE 浏览器,一般标签默认文字大小是16px,最小字体是1px,如果比1px 小,系统默认显示1px
  • 任意浏览器的字体大小都是上不封顶的,注意:比如 h 系列标签,默认字体大小,还有一些浏览器是自带默认样式的

  谷歌与IE 的对比图 :

  CSS 简介及书写规则---行内样式

 

1.2.3 font-family

  • font-family:  中文含义:字体、系列
  • 主要作用:设置文字字体
  • 文字:分为中文、英文

  1、常用中文字体:

    微软雅黑、方正粗黑宋简体,楷体

  示例如下:

  CSS 简介及书写规则---行内样式

  效果如下:

  CSS 简介及书写规则---行内样式

  2、常用英文字体:

    Arial、Comic、Sans MS、Webdings

  • 谷歌默认字体是微软雅黑
  • 语法注意事项:
  • 属性值外层需要加一对单引号
  • 可以同时设置多个字体,多个字体间用逗号隔开,从左到右,前面字体覆盖后面字体设置
  • 英文字体不用记忆
  • 如果文字内容为纯英文,设置多个英文字体,前者覆盖后者
  • 文字内容为文字 + 英文,设置多个中英文字体,从左到右找到第一个符合自己字体进行设置

  示例如下:

  CSS 简介及书写规则---行内样式

  效果如下:

  CSS 简介及书写规则---行内样式

1.2.4 盒模型样式

  • 盒模型样式包括:width、height、background-color;
  • width:设置样式宽度,属性值:数字 + px单位
  • height: 设置样式高度,属性值:数字 + px单位
  • background-color : 设置样式背景颜色,属性值与color一致,为英文单词或16进制
  • 网页的执行顺序:从上到下,从左到右

   示例如下:

  CSS 简介及书写规则---行内样式

  效果如下:

  CSS 简介及书写规则---行内样式

今天的文章CSS 简介及书写规则—行内样式分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/48024.html

(0)
编程小号编程小号
上一篇 2023-08-24
下一篇 2023-08-24

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注