CSS中的盒子模型

一.为什么使用CSS
     1.有效的传递页面信息
     2.使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
     3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
     4.具有良好的用户体验

 

  二.字体样式属性

     1.font-family:英文字体,中文字体  (类型)
      font-family: Times,"Times New Roman", "楷体";

     2.font-size:值单位      (大小)
      单位
       px(像素)
       em、rem、cm、mm、pt、pc

     3.font-style:normal(正常)、italic(斜体)和oblique(倾斜)  (风格)
      p span{
                font-weight: 700;
            }

     4.font-weight: 700   (字体粗细)

      normal 默认值,定义标准的字体
      bold 粗体字体
      bolder 更粗的字体
      lighter 更细的字体
      100、200、300、400、500、600、700、800、900 定义由细到粗的字体
      400等同于normal,700等同于bold

     5.font:字体风格→字体粗细→字体大小→字体类型
      font:oblique bold 12px "楷体";
  三.文本样式
     1.color
       rgb(0,0,0)  取值在0~255之间
       rgba(0,0,0,0) 最后一位代表透明度,取值在0~1之间

     2.文本水平对齐方式text-align
       left 把文本排列到左边。默认值:由浏览器决定
       right 把文本排列到右边
       center 把文本排列到中间
       justify 实现两端对齐文本效果

     3.首行缩进
       text-indent:20px;

     4.行高
       line-height:30px;

     5.文本装饰
       text-decoration
       none 默认值,定义的标准文本
       underline 设置文本的下划线
       overline 设置文本的上划线
       line-through 设置文本的删除线

     6.文本垂直对齐
       vertical-align
       top:上对齐
       bottom:下对齐
       middle:中间对齐
     7.文本阴影
       text-shadow:颜色   x轴移动位置   y轴移动位置  模糊半径(0代表没有)

  四.超链接伪类
     a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
     a:visited 单击访问后超链接样式 a:visited {color:#333;}
     a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
     a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

  五.列表样式
     list-style-image: url(image/arrow-icon.gif);  列表项前图像
     list-style-type  指定列表项前图标
     none 无标记符号 list-style-type:none;
     disc 实心圆,默认类型 list-style-type:disc;
     circle 空心圆 list-style-type:circle;
     square 实心正方形 list-style-type:square;
     decimal 数字 list-style-type:decimal

  六.背景颜色和图像
    颜色:background-color
    图像:background-repeat:url(路径)
     repeat:沿水平和垂直两个方向平铺
     no-repeat:不平铺,即只显示一次
     repeat-x:只沿水平方向平铺
     repeat-y:只沿垂直方向平铺
  七.渐变
    -浏览器内核-linear-gradient(方向,开始颜色,结束颜色)
    background:linear-gradient(to left,red,blue);
             background:-webkit-linear-gradient(to left,red,blue);

转载于:https://www.cnblogs.com/1314Justin/p/9196990.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/389427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jdk重启后步行_向后介绍步行以一种新颖的方式来预测未来

jdk重启后步行“永远不要做出预测,尤其是关于未来的预测。” (KK Steincke) (“Never Make Predictions, Especially About the Future.” (K. K. Steincke)) Does this picture portray a horse or a car? 这张照片描绘的是马还是汽车? How likely is …

PyTorch官方教程中文版:入门强化教程代码学习

PyTorch之数据加载和处理 from __future__ import print_function, division import os import torch import pandas as pd #用于更容易地进行csv解析 from skimage import io, transform #用于图像的IO和变换 import numpy as np import matplotlib.pyplot a…

css3-2 CSS3选择器和文本字体样式

css3-2 CSS3选择器和文本字体样式 一、总结 一句话总结:是要记下来的,记下来可以省很多事。 1、css的基本选择器中的:first-letter和:first-line是什么意思? :first-letter选择第一个单词,:first-line选择第一行 2、css的伪类选…

mongodb仲裁者_真理的仲裁者

mongodb仲裁者Coming out of college with a background in mathematics, I fell upward into the rapidly growing field of data analytics. It wasn’t until years later that I realized the incredible power that comes with the position. As Uncle Ben told Peter Par…

优化 回归_使用回归优化产品价格

优化 回归应用数据科学 (Applied data science) Price and quantity are two fundamental measures that determine the bottom line of every business, and setting the right price is one of the most important decisions a company can make. Under-pricing hurts the co…

Node.js——异步上传文件

前台代码 submit() {var file this.$refs.fileUpload.files[0];var formData new FormData();formData.append("file", file);formData.append("username", this.username);formData.append("password", this.password);axios.post("http…

用 JavaScript 的方式理解递归

原文地址 1. 递归是啥? 递归概念很简单,“自己调用自己”(下面以函数为例)。 在分析递归之前,需要了解下 JavaScript 中“压栈”(call stack) 概念。 2. 压栈与出栈 栈是什么?可以理解是在内存…

PyTorch官方教程中文版:Pytorch之图像篇

微调基于 torchvision 0.3的目标检测模型 """ 为数据集编写类 """ import os import numpy as np import torch from PIL import Imageclass PennFudanDataset(object):def __init__(self, root, transforms):self.root rootself.transforms …

大数据数据科学家常用面试题_进行数据科学工作面试

大数据数据科学家常用面试题During my time as a Data Scientist, I had the chance to interview my fair share of candidates for data-related roles. While doing this, I started noticing a pattern: some kinds of (simple) mistakes were overwhelmingly frequent amo…

scrapy模拟模拟点击_模拟大流行

scrapy模拟模拟点击复杂系统 (Complex Systems) In our daily life, we encounter many complex systems where individuals are interacting with each other such as the stock market or rush hour traffic. Finding appropriate models for these complex systems may give…

公司想申请网易企业电子邮箱,怎么样?

不论公司属于哪个行业,选择企业邮箱,交互界面友好度、稳定性、安全性都是选择邮箱所必须考虑的因素。网易企业邮箱邮箱方面已有21年的运营经验,是国内资历最高的电子邮箱,在各个方面都非常成熟完善。 从交互界面友好度来看&#x…

莫烦Matplotlib可视化第二章基本使用代码学习

基本用法 import matplotlib.pyplot as plt import numpy as np""" 2.1基本用法 """ # x np.linspace(-1,1,50) #[-1,1]50个点 # #y 2*x 1 # # y x**2 # plt.plot(x,y) #注意:x,y顺序不能反 # plt.show()"""…

vue.js python_使用Python和Vue.js自动化报告过程

vue.js pythonIf your organization does not have a data visualization solution like Tableau or PowerBI nor means to host a server to deploy open source solutions like Dash then you are probably stuck doing reports with Excel or exporting your notebooks.如果…

plsql中导入csvs_在命令行中使用sql分析csvs

plsql中导入csvsIf you are familiar with coding in SQL, there is a strong chance you do it in PgAdmin, MySQL, BigQuery, SQL Server, etc. But there are times you just want to use your SQL skills for quick analysis on a small/medium sized dataset.如果您熟悉SQ…

第十八篇 Linux环境下常用软件安装和使用指南

提醒:如果之后要安装virtualenvwrapper的话,可以直接跳到安装virtualenvwrapper的方法,而不需要先安装好virtualenv安装virtualenv和生成虚拟环境安装virtualenv:yum -y install python-virtualenv生成虚拟环境:先切换…

莫烦Matplotlib可视化第三章画图种类代码学习

3.1散点图 import matplotlib.pyplot as plt import numpy as npn 1024 X np.random.normal(0,1,n) Y np.random.normal(0,1,n) T np.arctan2(Y,X) #用于计算颜色plt.scatter(X,Y,s75,cT,alpha0.5)#alpha是透明度 #plt.scatter(np.arange(5),np.arange(5)) #一条线的散点…

计算机科学必读书籍_5篇关于数据科学家的产品分类必读文章

计算机科学必读书籍Product categorization/product classification is the organization of products into their respective departments or categories. As well, a large part of the process is the design of the product taxonomy as a whole.产品分类/产品分类是将产品…

es6解决回调地狱问题

本文摘抄自阮一峰老师的 http://es6.ruanyifeng.com/#docs/generator-async 异步 所谓"异步",简单说就是一个任务不是连续完成的,可以理解成该任务被人为分成两段,先执行第一段,然后转而执行其他任务,等做好…

交替最小二乘矩阵分解_使用交替最小二乘矩阵分解与pyspark建立推荐系统

交替最小二乘矩阵分解pyspark上的动手推荐系统 (Hands-on recommender system on pyspark) Recommender System is an information filtering tool that seeks to predict which product a user will like, and based on that, recommends a few products to the users. For ex…

莫烦Matplotlib可视化第四章多图合并显示代码学习

4.1Subplot多合一显示 import matplotlib.pyplot as plt import numpy as npplt.figure() """ 每个图占一个位置 """ # plt.subplot(2,2,1) #将画板分成两行两列,选取第一个位置,可以去掉逗号 # plt.plot([0,1],[0,1]) # # plt.su…