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

最新推荐文章于 2024-03-25 00:23:07 发布

闵农

最新推荐文章于 2024-03-25 00:23:07 发布

阅读量1.8k

点赞数 3

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/Archer1724/article/details/102668902

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

CSS

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

1. 注释

在CSS中的注释：/* */

2. 样式表的引用方法

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

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

<h1 style="color:red;">今天是个好日子</h1>
<!--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>

来看看它所呈现的页面是怎样的 →
在这里插入图片描述

(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>

给它随意添加一些文本内容，来看看它的效果：
在这里插入图片描述

其他文本属性：

（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;
            /*文本的字体大小：
            <absolute-size> 绝对大小值：small medium larger；
            <relative-size> 相对大小值：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>

它的效果是这样的：
在这里插入图片描述

(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>

行内元素(内联元素)：文本有多大，就占多大
eg： <a> , <span> , <input> , <img> , <label> , <select> <strong> ,<b>
块级元素 :文本再小，也占了全行
eg：<div>, <p>, < h1> ~ <h6> , <table> <ul>,< ol>,< dl>,< form>, <pre>

需要设置一个元素的高度时，行内元素要转换为行内块或是块级元素。
a{
display:inline-block;
height:20px;
}

 <style>
   p{
      display:block;  
     /* block(显示)  none(隐藏)*/
      visibility: hidden;
     /*hidden(隐藏)  visible(显示)*/
    }
 </style>

两者的区别：
display隐藏不占位置； visibility隐藏占位置

(7). outline（轮廓）

outline是绘制于元素周围的一条线，位于边框边缘的外围,也可以称为外边框线。
outline的定义顺序：outline-color ，outline-style ，outline-width.

p{
   outline:#f00 dashed 5px;
}

它是这样的:
在这里插入图片描述
如果觉得太花哨，你可以这样来设置：

 p{
   outline:none;
}

(8). vertical-align 属性（垂直对齐方式）

vertical-align:值；

sub（super）垂直对齐文本的下(上)标
top middle bottom
比如：为了使图片具有兼容性，设置 vertical-align:middle;
text-top（bottom）把元素的顶端与父元素字体的顶(底)端对齐

(9). 透明度（0.0~1.0）

设置图片透明度用 opacity属性，同时为了页面的美观，可以加上 transition属性使得透明度按固定时间过渡。

.div img{
   transition: opcity .3s linear;
}
.div img:hover{
    opacity: .7;
}

4. 盒子模型

在这里插入图片描述
我们从这张图可以看到：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
其中：

(1). padding（内边距，填充）

<style>
p{
  padding:12px;
  /*padding-top    padding-left
    padding-right  padding-bottom*/
 
</style>

(2). margin（外边距）

<style>
p{
   margin:12px;
   /*也可以单独去写：
     margin-top    margin-left
     margin-right  margin-bottom*/
}
</style>

padding和margin都可以这样来表示：

padding（margin）:a
一个值表示四边相同的填充（边距）
-padding（margin ）:a b;
两个值表示上下是a，左右是b
padding（margin）:a b c;
三个值表示上是a,左右是b,下是c
padding（margin）:a b c d;
四个值表示：上，右，下，左

(3). border（边框）

 <head>
    <title>字体</title>
    <style>
        p{ 
              width:100px;
              height:40px;
              /* 单位：px 像素   % 百分比  em  rem */
              border-style: solid;
              /*所有边框样式:方向是上右下左*/
              background-color: #FFCC99;
              /*边框颜色*/
              border-width:1px;
              /*边框宽度*/
              border-radius:5px;
              /*圆角*/
          }
    </style>
</head>

其中：

border-style: 值；
（所有边框样式:方向是上右下左。）

       属性值:
       none: 默认无边框
       dotted: 定义一个点线框
       dashed: 定义一个虚线框
       solid: 定义实线边界
       double: 定义两个边界。 两个边界的宽度和border-width的值相同
       groove: 定义3D沟槽边界。效果取决于边界的颜色值
       ridge: 定义3D脊边界。效果取决于边界的颜色值
       inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
       outset: 定义一个3D突出边框。 效果取决于边界的颜色值

border-radius：值;

      值：a  表示四角都为相同的圆角状态
      值：a  b  表示 左上，右下都为a，右上，左下都为b
      值：a b c  表示左上为a 右上和左下为b 右下为c
      值：a b c d 依次表示 左上  右上  右下  左下
      
      当 border-radius：50%；一般是圆或者椭圆。可以用padding去改变它的形状。

也可以：

 <style>
   p{
        border:1px solid #FFCC99;
       /*简写属性：将四个边的属性设置在一个声明
         (边框线 ：实线  线粗细 线颜色)
         类似：
        border-top      border-right
        border-bottom   border-left */
   }
 </style>

再来看它会是怎样的呢：
在这里插入图片描述

5. CSS颜色

例如：红色可以用四种方式表示：
在这里插入图片描述

(1).颜色名

 color:red;

(2). 十六进制数

 color: #ff0000 ; （也可以写为 #f00 ）

指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

(3). rgb( , ,)

  color: rgb(255,0,0);

RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

(4). rgba( , , ,)

 color:rgba(255,0,0,.7);

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

透明度也可以这样表示：

opacity: 50%;
/* 透明度 */

闵农

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录