文章目录

  • 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>
<!--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-leftpadding-right  padding-bottom*/</style>

(2). margin（外边距）

<style>
p{margin:12px;/*也可以单独去写：margin-top    margin-leftmargin-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-rightborder-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%;
/* 透明度 */

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

  1. CSS基础、盒子模型、选择器与权重

    CSS基础.选择器与权重.盒子模型 一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...

  2. 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点

    该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...

  3. css基础，盒子模型，选择器与权重

    1.css基础 1.1css简介 css(叠层样式表)是一种标记语言 1.1.1css语法规则 选择器加声明 <style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p ...

  4. CSS基础(part10)--盒子模型之边框

    学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 盒子模型简介 边框(border) 边框属性 举个例子 边框综合设置 盒子边框写法总结表 边框重叠设置 盒子模型 盒子模型简介 ...

  5. CSS基础知识(盒子模型)

    继承上一篇CSS的三大特性的优先级继续讲解. 1.1优先级 优先级注意点: 权重是有4组数字组成的,但是不会有进位. 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器以此类推. 等级判 ...

  6. （9）css常用样式--盒子模型

    一.CSS盒子模型介绍 盒子模型又叫框模型,包含了五个用来描述盒子位置.尺寸的属性,分别是宽度 width.高度 height.内边距 padding. 边框 border.外边距 margin.   ...

  7. CSS基础：盒子模型和浮动

    盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子,封装HTML元素. 它包括:外边距(marg ...

  8. CSS基础(part12)--盒子模型之外边距

    学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 外边距 属性设置 块级盒子水平居中 文字居中以及盒子居中 插入图片和背景图片的区别 清除元素的默认内外边距 外边距合并(只存在垂 ...

  9. CSS基础(part11)--盒子模型之内边距

    学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 内边距(padding) 属性设置 内盒尺寸计算 padding什么时候不影响盒子大小 盒子模型 内边距(padding) pa ...

  10. CSS基础样式属性设置

    文章目录 css基础样式与属性设置 一.宽和高 二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...

最新文章

  1. 为什么说 Python 内置函数并不是万能的？
  2. 计算机密码行业专题研究：网络安全最大弹性领域
  3. c语言的0变成奇怪的图形,Word打开后图片中的文字变成了奇怪的符号
  4. C++有用的字符函数库
  5. PCL：全程详解 VS2010+PCL配置
  6. 信息学奥赛一本通（1057：简单计算器）
  7. webbrowser 访问iframe拒绝访问_电脑无法删除文件访问被拒绝【解决方案】
  8. python代码覆盖率测试_Python代码覆盖率分析工具----Coverage
  9. 【血糖检测】基于matlab改进深度回归网络的无创血糖检测【含Matlab源码 1572期】
  10. 树莓派无法打开摄像头模块，无法识别摄像头
  11. google浏览器将页面保存为图片
  12. centos7 安装 K8S 及启动 POD问题
  13. 信息学奥赛一本通：1413：确定进制
  14. 仿热血江湖帮战客方血帮战 开始对战记时器结束事件
  15. 海思Hi3516CV200_Camera芯片产品规格书
  16. vs2017支持所有版本VC
  17. C语言的部分杂碎知识
  18. Collaborative Filtering 协同过滤小结 part-1：CF背景
  19. Kotlin contract 用法及原理
  20. 如何在MySQL中实现替换字段部分内容

热门文章

  1. 如何在线将ofd转成Word格式文档
  2. 查看redis信息命令
  3. 一行代码，你就可以制作出放大镜软件
  4. 【JDK8、JDK11资源分享-迅雷下载】
  5. “如影计划” 不带手机也能随身带支付宝
  6. 支持 Itanium 晶片行动 Linux 抢先微软一步
  7. python儿童宣传-python儿童教学
  8. windows server2012 安装 postgresql安装失败提示getlocales的解决方法 亲测有效
  9. HTTP Header
  10. 关于PS基础设计学习总结——绘画