1、css选择器:相当于一个标识,有3种选择器

  第一种选择器:标签选择器 p{ color:red;}
  第二种选择器:class选择器 .c1{ color:green;} 可被多次调用
  第三种选择器:id选择器 #d1{ color:blue;} 独有

  优先级:标签<class<id

  注意:一个标签可以有多个class,但是只能有一个id

2、css文字效果:

  字体:font-family
  字号:font-size
  颜色:color
  粗体:font-weight
  下划线:text-decoration:underline(删除线:line-through;顶划线:overline
  英文首字母大写:text-transform:capitalize(全部大写:uppercase;全部小写:lowercase)
  字母间距:letter-spacing
  水平位置:text-align

  居中:

    水平居中:text-align:center
    垂直居中:line-height:300px;(和文字所在的div的高度一样)

3、css继承性:

  #d1 p 表示id为d1的标签下面的p标签
  #d1,p 表示id等于d1的标签和p标签

  注意:css具有继承性,只有字体相关的css属才能够被继承 (面试常问)

4、边框:
              样式 粗细 颜色
  border: solid 1px red;

  等同于下面3句话:

  边框样式:border-style:solid;(实线:solid;虚线:dashed;点划线:dotted)
  边框粗细:border-width:1px;
  边框颜色:border-color:red;

5、背景:

  背景颜色:background-color:#00FF00;

  背景图片:background-image:url(路径);

  (注意:当图片的的大小,小于它所在的div时,图片会横向、纵向填满div)

  背景重复:background-repeat:no-repeat;(不重复:no-repeat;横向重复:repeat-x;纵向重复:repeat-y)

  背景方位:background-position:5px 10px;(左边、上边)

  背景固定:Background-attachment:fixed;

  综合:

    background:blue url(xx.jpg) no-repeat fixed 5px 10px;

6、补充内容:

  ·table表格的css属性:border-collapse:collapse;(表格间隙合并)

    常用属性:width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align
          宽    高    边框    内框宽   文字到边框距  边框颜色      背景色    水平位置

  ·链接时是手的形状:cursor:pointer;

转载于:https://www.cnblogs.com/marchtree/p/4631536.html

前端CSS基础7.8相关推荐

  1. 前端css基础知识点之PC端项目-规范

    前端css基础知识点之PC端项目-规范 1 文件管理 文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...

  2. 前端css基础知识点之opacity——透明度

    前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持 特点 设置opacity的元素的所有后代会一起具 ...

  3. 前端——CSS基础学习【part 2】

    前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...

  4. 前端CSS基础之案例--图片

    用<前端CSS基础>文章里的内容完成一个图片案例 效果展示: 代码实现: <!DOCTYPE html> <html lang="en"> &l ...

  5. 前端css基础知识点之sprite——雪碧(精灵)

    前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧 把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...

  6. 从头学前端-CSS基础01

    CSS简介: CSS是层叠样式表的简称,有时也会称之为CSS样式表或级联样式表.CSS也是一种标记语言(和html一样,不是个编程语言): Html主要是页面结构,显示元素内容,CSS是美化页面,布局 ...

  7. 从头学前端-CSS基础02

    一个工具: 前端快速开发插件Emmet Emmet 的前身就是 Zen Coding. 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具.将它整合进文本编辑器,可以提供一些功能和快捷 ...

  8. 前端 CSS 基础笔记

    CSS入门 一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 二.基本用法 1.css语法 <hea ...

  9. web前端---css基础

    一.CSS技术 1.什么是CSS CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力. 主要是使用CSS属性来实现,最终可以将css代码和HTML网页代 ...

最新文章

  1. scrum敏捷开发工具实践分享
  2. 创建符合标准的、有语意的HTML页面——ASP.NET 2.0 CSS Friendly Control Adapters 1.0发布...
  3. 【Spark亚太研究院系列丛书】Spark实战高手之路-第一章 构建Spark集群(第二步)(4)...
  4. 6_程序员最常用的快捷键的都在这里啦 (哈哈,我不是)(20181208)
  5. Unix哲学,Microservices和DDD (2)
  6. vue商城项目源码_CMS全栈项目之Vue和React篇(下)(含源码)
  7. Build 2019:微软正式宣布 .NET 5
  8. 安全中心登录_放心使用instagram需要做到的5个信息安全设置
  9. 结合Android源码分析总结单例模式的几种实现方式
  10. php 框架测试,PHP测试框架PHPUnit组织测试操作示例
  11. Quartus II 之1位全加器
  12. java 下载指定路径_用java流的方式怎么指定下载到指定目录下
  13. NMOS和PMOS电流流向以及导通条件
  14. WIFI参数Beacon Interval、DTIM、Fragment Length、RTS Length
  15. 计算机配置怎么造假,骗局揭秘:卖你一台假电脑 再送你一个假鲁大师
  16. 一个全网最详细 Python 教程,不信你来学一学!
  17. 初级程序员需要掌握的知识
  18. aardio 多线程开发入门
  19. 逐点插入法-delaunay三角剖分
  20. 马上6等待服务器响应,解决网页响应慢,等待时间过长,waiting(TTFB)时间过长...

热门文章

  1. python语言中文社区-扯个淡:用Python实现中文编程
  2. python是c语言写的吗-C语言是学python的基础吗?
  3. spring中AnnotationUtils的设计
  4. jsoncpp在vs2013上的编译
  5. 【OO学习】OO第四单元作业总结及OO课程总结
  6. git创建、切换、合并、删除分支
  7. 8、模态对话框、非模态对话框
  8. 如何快捷输入函数上方的注释代码(Summary)
  9. 0607am抽象类接口析构方法tostring小知识点
  10. 在Sublime Text3中运行PHP代码