css简介和属性
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元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...
随机推荐
- http知识总结
layout: '''http' title: 知识整理' date: 2019-06-09 17:07:20 tags: --- 简介 超文本传输协议(HTTP)是用于传输诸如HTML的超媒体文 ...
- SQL语句 运算符
6.2 运算符 6.2.1 算术运算符 加 / 减 / 乘 / 除 6.2.2 连接运算符 是用来连接字符串的.跟java中的 + 是一致的. select 'abc' || ' bcd ' as ...
- stdarg的使用
// 可变参头文件 <stdarg.h> // 主要依赖五个宏: va_list,va_start, va_arg, va_end, va_copy // 其中 va_copy 是 c99 ...
- java数据结构3--List
List 1.1 list接口的简介 1.2 list实现子类 ArrayList:线程不安全,查询速度快,底层用的是数组,增删慢LinkedList:线程不安全,链表结构,增删速度快,查询慢Vect ...
- MySQL知识总结(缓存)
1.缓存机制概念 缓存机制简单的说就是缓存sql文本及查询结果,如果运行相同的sql,服务器直接从缓存中取到结果,而不需要再去解析和执行sql.如果表更改了,那么使用这个表的所有缓冲查询将不再有效,查 ...
- 【JZOJ1282】打工
题目 分析 显然,有一个结论, 在有效的方案中,第i位的数一定小于等于i. 所以,设\(f_{i,j,k}\)表示,做到第i位,前i位的最大值为j,前i位是否与输入的序列的前i位相等. 转移方程随便搞 ...
- 【ipc-mq】根据mq的key查看使用进程
使用ipcs -q可以得到key与msqid的对应关系,从而找到msgid webadmin@172.172.179.3:/usr/local/webapps/test_ma[17:17:36]$ i ...
- 020:reverse函数补充
补充reverse两点: 1.如若在反转url时,需要添加参数,那么可以传递 kwargs 参数到 reverse 函数中,实例代码如下: '}) ) 2.如若想添加查询字符串参数,则必须手动进行ur ...
- php7魔术方法
抽空把php7的魔术方法复习一下,大致如下 __constract:在实例化一个类时,触发 __destruct:在一个实例对象被销毁的时候触发 __set(string $name , mixed ...
- 浅谈Vue中Slot以及slot-scope
vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...