CSS指的是层叠样式表（Cascading Style Sheets）

样式定义如何显示HTML元素，通常存储在样式表中。

css使用方式

内联式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>内联样式</title>

</head>

<body>

    <p style="background: red"> I  love  China!</p>

</body>

</html>

内部样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联样式</title> <style type="text/css"> p{ background: green; } </style> </head> <body> <p> I love China!</p> </body> </html>

外部样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>内联样式</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <p> I  love  China!</p>

</body>

</html>

CSS语法：

selector {property : value;} 选择器{属性1：值1；属性2：值2；}

常用选择器：

.ClassSelector(类)
#IdSelector(id)
Selector(标签)

基本CSS属性：背景，文本，字体，尺寸，边距和填充，边框

background (背景)

background-color 背景颜色
background-image 背景图像
background-repeat 背景平铺方式或重复
background-attachment 背景图像是否固定或随平面滚动
background-position 背景图像起始位置

Text(文本）

color 颜色
line-height 行高
text-align 文本水平对齐方式
vertical-align 文本垂直对齐方式
Text-indent 首行缩进
Text-shadow 字体阴影
White-space 空白处理方式
Word-spacing 字间距

Font

Font-family 指定文本字体系列
Font-size 指定文本字体大小
Font-style 指定文本字体样式
Font-weight 指定字体粗细

Dimension

height 设置元素高度
Line-height 行高
max-height 元素最大高度
max-width 元素最大宽度
min-heigth 元素最小高度
min-winth 元素最小宽度
width 设置元素宽度

Margin&Padding

Margin

Margin-top 上边距
Margin-bottom 下边距
Margin-left 左边距
Margin-right 右边距

Padding

Padding-yop 上填充
Padding-bottom 下填充
Padding-left 左填充
Padding-right 右填充

Border

Border-top 上边框
Border-bottom 下边框
Border-left 左边框
Border-right 右边框
Border-style 边框样式
Border-width 边框宽度
Border-color 边框颜色

css简介和属性的更多相关文章

【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要初窥后端框架 css简介 css选择器今日内容详细初次体验前后端交互 # 代码无需掌握只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
CSS简介，基础选择器，字体属性，文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
html5快速入门（二）—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
CSS 简介
CSS 简介需要具备的基础知识在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...
CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
CSS 简介、选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
CSS（一）：CSS简介和基本语法
一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...

随机推荐

一、Linux 设备驱动介绍及开发环境搭建
1.1 Linux 设备驱动介绍 1.1.1 分类及特点计算机系统的硬件主要由 CPU.存储器和外设组成. 当前 CPU 内部都集成有存储器和外设适配器. 外设适配器有入 UART.IIC 控制器. ...
VxWorks引导启动过程
https://blog.csdn.net/phunxm/article/details/6979089
vue和cordova项目整合打包，并实现vue调用android的相机的demo
经过网上查找很多资料,发现很多只有vue+cordova的项目整合,但是vue使用cordova插件的文章很少,现在把从创建cordova和创建vue到vue使用插件到项目打包到android手机运行 ...
测试工具Telerik Test Studio发布R2 2019|支持VS 2019
Telerik Test Studio是一个用于功能性Web.桌面和移动测试的直观测试自动化工具,它能轻松地实现自动化测试.同时会为GUI.性能.加载和API测试提供完整的自动化测试解决方案. |更多 ...
设置HTML的TextArea标记跟随文本内容自动设置高度
写内容的时候用的是textarea来写,可以换行,然后预览页面也要显示是换行才行,所以预览页面还是要用textarea来显示, 样式去掉边框,不可以拉伸,不可编辑 // html <textar ...
016：URL命名与反转URL
为什么需要URL命名? 主要解决蛋疼url变化情况,比如:哪天项目经理或领导过来说,把login改成signin,把register改成signup等蛋疼的需求——因为一旦改了url后,相关视图函数里 ...
为什么要重写hashcode( )和equals( )？
打个比方,一个名叫张三的人去住酒店,在前台登记完名字就去了99层100号房间,此时警察来前台找叫张三的这个人住在哪间房,经过查询,该酒店住宿的有50个叫张三的,需要遍历查询,查询起来很不方便. 那么就 ...
启动 jvm 参数小总结
1.启动某项目 nohup java -jar -Xms256m -Xmx512m -Dspring.config.location=/config/application.yml -Dfile.en ...
Mysql5.7.26解压版(免安装版)简单快速配置步骤,5分钟搞定(win10-64位系统)
第一次安装mysql环境的时候,总会遇到各种各样的坑,在尝试了安装版和解压版的数据库之后,感觉mysql的解压版更加的简单方便,省去好多时间做专业的事情我这里选择的是5.7.26版本,解压版下载地址 ...
Spring Cloud云架构 - SSO单点登录之OAuth2.0 登出流程(3)
上一篇我根据框架中OAuth2.0的使用总结,画了一个根据用户名+密码实现OAuth2.0的登录认证的流程图,今天我们看一下logout的流程: /** * 用户注销 * @param accessT ...

css简介和属性