闵农
闵农

关于CSS--基础样式、盒子模型和颜色

文章目录

  • CSS
    • 1. 注释
    • 2. 样式表的引用方法
    • 3. CSS样式属性
      • (1). Backgrounds（背景）
      • (2). Text（文本）
      • (3). Font（字体）
      • (4). 列表 （List）
      • (5). float（浮动）
      • (6). display/visibility
      • (7). outline（轮廓）
      • (8). vertical-align 属性（垂直对齐方式）
      • (9). 透明度（0.0~1.0）
    • 4. 盒子模型
      • (1). padding（内边距，填充）
      • (2). margin（外边距）
      • (3). border（边框）
    • 5. CSS颜色
      • (1).颜色名
      • (2). 十六进制数
      • (3). rgb( , ,)
      • (4). rgba( , , ,)

对HTML的基础内容有一定了解后，我继续进入CSS的学习。

CSS

层叠样式表（Cascading Style Sheets), 是一种可以用来表现HTML等文件样式的计算机语言。

1. 注释

  • 在CSS中的注释：/* */

2. 样式表的引用方法

注意：其中例子中的标签可以是任何标签

(1). 行内样式表/内联样式（在标签内定义）

<h1 style="color:red;">今天是个好日子h1>

(2). 页面内样式/嵌入样式（在head头部内定义）

<head>
    <style>
        p{
            font-size: 20px;
        }
    style>
head>

(3). 外部样式表（在链接的.css文件中定义）

<head>
<link rel="stylesheet" type="text/css" href="index.css"/>
head>
  • 比较以上三种样式表的优先级：
    行内样式表 > 页面内样式 > 外部样式表
    (即：当出现更高优先级的样式定义时，上一个样式表中相同的属性值会被取代；同时，剩下的属性值会被继承。）

3. CSS样式属性

(1). Backgrounds（背景）

 <head>
    <title>背景title>
    <style>
        body {
            background-color: #000;
            /*背景颜色*/
            background-image: url("5.jpg");
            /*以图像为背景：
              url("图片路径”)； 网页中图片格式：jpg  gif  png  webp */
            background-repeat:no-repeat;
            /*背景是否重复：
              repeat(水平垂直平铺),no-repeat,repeat-x(仅水平平铺),repeat-y（仅垂直平铺）*/
            background-position: right top;
            /*背景图像的起始位置：
             (1)水平 垂直:  left/center/right 水平居左中右, top/center/bottom垂直居上中下;
             (2)x%  y% (3)xpx ypx  */
            background-attachment:fixed;
            /*背景是否固定:
              默认为scroll(滚动)，fixed,local(随元素内容滚动而滚动) */
    style>
head>

又或是，可以简写：

<style>
    body{
          background:#000 url("5.jpg")  no-repeat right top;
        }
 /*background（简写：）背景颜色 背景图片 背景是否重复 背景定位位置*/
 style>

来看看它所呈现的页面是怎样的 →
关于CSS--基础样式、盒子模型和颜色_第1张图片

(2). Text（文本）

 <head>
    <title>文本title>
    <style>
        p{
            color:rebeccapurple;
            /*文本颜色*/
            line-height:20px;
            /*行高,也称行间距：一般用行高布局垂直对齐方式。
              1.行高和高度一致，内容在垂直正中间
              2.行高比高度大，内容在偏下
              3.行高比高度小，内容偏上*/
            text-align: left;
            /*对齐元素中的文本：
            right(文本居右)  left  center  justify(两端对齐)*/
            text-decoration: underline;
            /*给文本添加装饰:
             none(无下划线)  underline(下划线) overline（上划线）
             line-through（中划线） blink（闪烁的文字）*/
            text-indent:2em;
            /*文本缩进(首行)：%； 使用长度值：length(px|em|rem) ；*/
            text-transform: uppercase;
            /*文本转换(对英文有效)
            none uppercase(全大写) lowercase(全小写) capitalize(首字母大写)*/
        }
    style>
head>

给它随意添加一些文本内容，来看看它的效果：
关于CSS--基础样式、盒子模型和颜色_第2张图片

其他文本属性：

  • （1）text-shadow 文本阴影
    属性值：
    h-shadow：（必选，水平阴影的位置。允许负值）
    v-shadow：（必选，垂直阴影的位置。允许负值）
    blur：（可选，模糊的距离）
    color：（可选，阴影的颜色）
  • （2）letter-spacing 字符间距
    属性值：
    length(px|em|rem)：使用长度值
  • （3）direction 文本方向
    属性值：
    rtl (从右向左)
    ltr(从左向右)
  • （4）vertical-align 垂直对齐方式
    属性值：
    baseline： 默认，在父元素的基线；
    sub： 垂直对齐文本下标；
    super ：垂直对齐文本上标；
    top ：元素顶端与行内最高元素顶端对齐；
    text-top： 元素顶端与父元素字体的顶端对齐；
    middle： 在父元素的中部；
    bottom ：元素底端与行内最低元素底端对齐；
    text-bottom ： 元素底端与父元素字体的底端对齐；
    % ： 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值;
    length(px|em|rem)：使用长度值
  • （5）white-space 元素中空白的处理
    属性值：
    nowrap： 不换行；
    pre-wrap： 保留空白序列，正常换行；
  • （6）word-spacing 字间距
    属性值：
    length(px|em|rem)：使用长度值，允许负值

(3). Font（字体）

 <head>
    <title>字体title>
    <style>
        p{
            font-family:"宋体";
            /*
            文本的字体系列：
            可以定义多个系列值，用逗号隔开 
            generic-family 通常字体，如Serif;
            family-name 指定系列 ;
            */
            font-size:20px;
            /*文本的字体大小：
             绝对大小值：small medium larger；
             相对大小值：larger smaller；
            length(px|em|rem)；
            %；
            */
            font-style: italic;
            /*文本的字体样式
            normal(默认标准样式) italic(斜体)*/
            font-weight: bold;
            /*字体粗细：
             normal bold（粗体）  bolder（更粗） lighter（更细） 100-900
            */
        }
    style>
head>

font-variant （以小型大写字体或者正常字体显示文本）：small-caps （显示小型大写字母的字体）

当然，它也可以这样写：

<style>
     p{
        font:italic bold 20px "宋体";
      }
style>

它的效果是这样的：
关于CSS--基础样式、盒子模型和颜色_第3张图片

(4). 列表 （List）

  • 在HTML中，有3种类型的列表：

（1） 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
（2） 有序列表 - 列表项的标记有数字或字母等等。
（3） 自定义列表

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

 <style>
        ul{
            list-style-type: square;
            /*列表项标志的类型*/
            list-style-image: url("4.gif");
            /*将图像设为列表项标志*/
            list-style-position:inside;
           /*列表项标记得位置（符号）:inside outside*/
            list-style:square   url("4.gif");
            /*简写*/
        }
 style>

(5). float（浮动）

<style>
    p{
       float:left;  /*left左浮动    right右浮动*/
     }
style>

在这里，插入一个新定义 → 布局：

  • 浮动流
  • 标准流
  • 浮动+标准流 ＝ 混合流

当想转换成标准流的时候，可以清空浮动：
clear : both ;

(6). display/visibility

 <style>
    p{
       display:block;  
       /* 属性值：
       block  转换为块级元素（占一行）
       inline-block  转换为行内块 （宽高起作用）
       inline 转换为行内元素（占内容位置）
       */
     }
 style>