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简介和属性的更多相关文章

  1. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  2. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  3. CSS简介,基础选择器,字体属性,文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  4. html5快速入门(二)—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  5. CSS 简介

    CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...

  6. CSS那些事儿-阅读随笔1(CSS简介与选择符)

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  7. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  8. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. CSS(一):CSS简介和基本语法

    一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...

随机推荐

  1. MySQL知识总结(缓存)

    1.缓存机制概念 缓存机制简单的说就是缓存sql文本及查询结果,如果运行相同的sql,服务器直接从缓存中取到结果,而不需要再去解析和执行sql.如果表更改了,那么使用这个表的所有缓冲查询将不再有效,查 ...

  2. UITextField实时监听输入文本的变化

    [textField addTarget:self action:@selector(textFieldChanged:) forControlEvents:UIControlEventEditing ...

  3. java 流操作对文件的分割和合并的实例详解_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 java 流操作对文件的分割和合并的实例详解 学习文件的输入输出流,自己做一个小的示例,对文件进行分割和合并. 下面是代 ...

  4. 两台linux服务器相互拷贝文件的两个方法

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...

  5. py从入门到实践 第四章

    4.1 遍立列表 ~= shell 数组————————————————————————————————————————————thrink = ['link','path','pwd']for i ...

  6. linux 内存

    [转]Linux 查看内存(free buffer cache) 转自:http://elf8848.iteye.com/blog/1995638 Linux下如何查内存信息,如内存总量.已使用量.可 ...

  7. 打开ubuntu终端,没有用户名显示,只剩下光标在闪

    总结起来就是bash损坏了.bash是用户与操作系统内核交互的工具.bash损坏,则用户无法操作计算机. 推荐两个帖子: https://blog.csdn.net/u011128515/articl ...

  8. mac 的 quickTime Player 设置播放速度

    按住 option 点击 下一个视频的图标每次调整幅度为0.1,大于 1.9 声音会消失. 按住 option+J 调慢播放速度 option+L 调快播放速度 每次调整幅度为0.1

  9. msf生成后门拿shell

    0X01简介 这里我本来想学习 msf利用漏洞反弹shell的 但是 没有靶机....等找了靶机在弄吧 kali 172.18.5.118 靶机  172.18.5.240 先尝试能不能ping通 好 ...

  10. ali之mtl平台学习

    摩天轮平台可以进行无线测试.设备借用.打包发布.线上监控等功能. 无线测试包括:mock测试.真机适配.代码审查.验收报告等. mock测试类似于fiddler,主要用于接口查看,可以查看请求,返回串 ...