CSS基础——day3

权泉全
146 阅读7分钟

css介绍

  • Cascading Style Sheets，简称层叠样式表，主要用来设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。

一、css书写位置

  • css可以通过三种方式引入到项目中：行内样式、内嵌样式、外联样式；

1. 行内样式

  • 在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可；
  • <div style=“color:pink; font-size:16px;”>我是行内样式</div> （只作用于当前标签）；

2. 内嵌样式

  • 书写在head标签里面，以一对style标签包裹；
  • image.png
  • 作用于当前页面，实现了结构和样式的半分离。

3. 外联样式

  • 使用外部链接引入css是我们实际项目中常用的方法，我们需要通过两步操作完成：
  • 第一步：在css文件夹中新建一个 .css 格式的css文件；
  • 第二步：在html的head标签中用link引入，link标签需要配合相关的rel关系，type文件类型 （可以省略不写），href文件路径三个属性完成；
  • <link rel="stylesheet" href="./css/style.css">
  • 可以多个页面使用，实现了结构和样式的完全分离。

二、基础选择器

1. 标签选择器（html选择器）

  • 指用HTML标签名称作为选择器来选择元素设置样式。
  • 按照标签名称分类，将页面中所有的当前标签选中指定统一的样式
  • 如以下代码：表示将当前页面中所有的p、div、li全部选中设置样式；
  • image.png

2. 类选择器

  • 通过类选择器给对应的标签设置名称，然后设置不同的样式，从而实现同一类标签的差异化设置；
  • 使用类选择器我们需要两步来完成：
  • 第一步：在html结构中给对应的标签设置 class属性="类名称" ，调用css设置的样式；
  • <div class="类名称"></div>
  • 第二步：在css文件中用英文点( . )后面紧跟着类名 称给元素设置对应的样式；
  • .类名称 { css属性:css属性值; }
  • image.png
  • 注意： 类名规范: 可以由数字、字母、下划线、中划线组成，长单词可以用中划线和下划线进行连接，不能以数字和中划线开头。

3、id选择器

  • id选择器在实际开发中我们主要是在javascript中获取元素使用，日常开发基本不用id选择器来设置样式；
  • 使用id选择器设置盒子样式，也要通过两步完成：
  • 第一步：在html结构中给对应的标签设置 id属性="id名称" ，调用css设置的样式；
  • <div id="id名称"></div>
  • 第二步：在css文件中用 # 号 后面紧跟着id名 称给元素设置对应的样式；
  • #id名称 { css属性:css属性值; }
  • 注意点： id属性类似身份证，在一个页面中只能使用一次，不要重复，一个标签上只能使用一个id（不同于类），一般搭配js使用

4、通配符选择器

  • 一个 （ * 号） 可以匹配当前页面的所有标签，设置统一的样式；
  • 主要用于html初始化。
  • image.png

选择器命名规范

  1. 不能用纯数字、数字开头的、中文命名，可以用数字结尾；
  2. 命名最好有意义，尽量让别人一眼就能知道这个类名的目的，可以参照开发手册或者直接百度翻译即；
  3. 长名称或者词组可以使用横线或者下划线连接命名；

类选择器技巧 -- 多类名调用

  • 一个标签只能设置一个calss属性，如果想要调用多个类名可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
  • <!-- 语法： class="类名1 类名2 类名3 ..." -->

id选择器使用技巧 -- 唯一性

  • id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；

三、常用文本控制属性

  1. font-family ： 设置文字显示的字体；
  • font-family: '宋体', Arial, 'Microsoft Yahei';
  • 注意： 字体的取值可以是一个值也可以是多个值，如果是多个值需要用英文逗号隔开，如果字体是汉字或者多个英文单词组成可以用英文引号包裹起来；浏览器会选择列表中第一个该计算机上有安装的字体。
  1. font-size ：设置文字字体大小，必须加单位，其他单位（比如px、em、cm、mm）。
  • 浏览器默认字体大小为16px，最小字体大小为12px，设置小于12时 ，默认为12 （设置0除外）。
  1. font-weight ： 设置文本粗细；
  • 设置加粗样式：font-weight取值为bold或者700(100-900，但不是所有字体都提供了9种粗细，所以有的值页面看着无变化)。
  • font-weight: bold/bolder; font-weight: 700; （都为加粗）
  • 设置不加粗样式：font-weight取值为normal或者400。
  • font-weight: normal/lighter; font-weight: 400; （都为不加粗）
  1. font-style ： 文本倾斜样式；
  • font-style: normal; （为不倾斜）
  • font-style: normal; （为倾斜）
  1. color ： 文本颜色；
  • 设置文字的颜色显示，取值有三种：
  • 1.预定义的英文（red，green，gold，pink）；
  • 2.十六进制取值，必须要用#号链接取值（#ffff00，#000，#f00);
  • 3.rgb(颜色值1，颜色值2，颜色值3) ---- ，rgb表示红绿蓝( rgb(red, green, blue))，取值为0-255的数字（黑色（0,0,0），白色rgb(255,255,255))；
  1. line-height ：行间距（行高）；设置两行文本之间的距离，也是一行文本的高度。
  • line-height: 30px; //单位可以为（比如px、em、cm、mm）等；
  • line-height: 2; //无单位；自身字体大小的两倍
  • 注意 ：如果设置行高的时候不书写单位最终得到的行高大小是当前文字大小的倍数。
  • 测量行高方法：两行文字的中间位置到下一个两行文字的中间位置的距离
  • image.png

  • 单行文本垂直居中 ：设置盒子的行高等于盒子的高度就可以实现单行文本在盒子中垂直居中；

  1. text-align ：设置一个盒子里面的文字对齐方式，默认取值为left，还有center和right取值；
  • image.png
  • 注意： text-align不仅可以让盒子里面文字设置对齐方式，也可以给盒子里面的img、a、span、input、button等在一行显示多个的标签设置对齐方式；（重点：text-align是加在父元素身上的，不是元素本身身上！！）。
  1. text-indent ：文本缩进；网页的文章段落设置首行缩进文字的效果。
  • p { text-indent: 2em; } em单位是一个相对单位，他是相对于当前文字的大小，1em=当前一个文字的大小。
  • 注意： 单位设置可以是px，也可以是em，em单位是一个相对单位，他是相对于当前文字的大小，1em=当前一个文字的大小（比如：文字font-size:30px;那么2em就相当于60px）；
  1. text-decoration ：设置文字的下划线、上划线、删除线、无装饰线等样式。
  • 取值有：none、underline、overline、line-through；
  • text-decoration: none; 表示没有线或去除线。
  • text-decoration: underline; 下划线
  • text-decoration: overline; 上划线
  • text-decoration: line-through; 删除线

文本控制属性综合写法

  • 可以将文字样式font-style、文字加粗font-weight、文字大小font-size、行高line-height，文字字体font-family进行合并书写，达到简化代码的作用；
  • 基本语法： font: italic 700 80px/120px serif;//font：是否倾斜 是否加粗 文字大小/行高 字体。
  • 注意：
  • 1. font的书写顺序是不能打乱的；（font：是否倾斜 是否加粗 文字大小/行高 字体;）
  • 2. 如果没有的属性可以省略不写，但是文字大小和字体必须要存在，否则无效；
  • 3. 复合属性下面可以继续写修改字体的属性;
avatar
文章
阅读
粉丝