资讯专栏INFORMATION COLUMN

CSS基础知识点

evin2016 / 1732人阅读

摘要:作为属性写在元素内的样式选择器类选择器标签选择器通配符选择器浏览器自定义或继承

2019-03-21----16:05:45

周期:5天

学习资料:http://how2j.cn/k/css2/css2-tutorial/238.html?p=67889

源代码地址---GitHub:https://github.com/BenCoper/CSS

Readme:简要概括知识点详细代码前往GitHub-----Star--Fork

1.CSS基础

  1.CSS选择器

元素选择器:p{}

id选择器:#p1{}

类选择器: .pre{}   

  2.CSS注释

注释:/**/

  3.CSS尺寸

width:宽度   height:高度

  4.CSS背景

background-color-----背景颜色

background-image:url(imagepath)---图片做背景

url(background.jpg)---本地测试

background-repeat---背景水平垂直方向重复---参数可选

background-size: contain---背景平铺

  5.文本

color---文字颜色

text-align---对齐

text-decoration---文本修饰

lineheight---行间距

letter-spacing---单词间距

text-indent---首行缩进

text-transform---大小写

white-space---空白格

  5.字体

font-size---尺寸

font-style---风格

font-weight---粗细

font-family---字库

font---声明在一起

  6.鼠标样式

cursor:crosshair---十字架

cursor:pointer---手指

   7.表格

table-layout:automatic|fixed---表格布局

border-collapse:separate|collapse---表格边框

  8.边框

border-style---边框风格

border-color---边框颜色

border-width---边框宽度

border---都放在一起

boder-top---只有一个方向有边框

boder-top,border-left---有交界的边都有边框

div---块级元素(自动换行)

span---内联元素(无换行)

  9.内边距

padding-left: 左内边距 
padding-right: 右内边距 
padding-top: 上内边距 
padding-bottom: 下内边距 
padding: 上 右 下 左

  10.外边距

margin-left: 左外边距 
margin-right: 右外边距 
margin-top: 上外边距 
margin-bottom: 下外边距 

  11.边框模型

  12.超链状态

link - 初始状态,从未被访问过 
visited - 已访问过 
hover - 鼠标悬停于超链的上方 
active - 鼠标左键点击下去,但是尚未弹起的时候

  13.隐藏

display:none; ---隐藏一个元素,这个元素将不再占有原空间 “坑” 让出来了
visibility:hidden;---;隐藏一个元素,这个元素继续占有原空间,只是“看不见”

  14.css文件

href指向的路径就是多带带的css文件路径

  15.CSS优先级

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 2. 作为style属性写在元素内的样式 3. id选择器 4. 类选择器 5. 标签选择器 6. 通配符选择器 7. 浏览器自定义或继承

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1078.html

相关文章

  • CSS基础知识之float

    摘要:前段时间写过一篇基础知识之,当时对的理解不太准确,被慕课网多名读者指出原文已修正,如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流,文字和行级元素会环绕该元素,块级元素则不受影响。 前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉)。现对float进行更深入的...

    wuyangchun 评论0 收藏0
  • #WEB安全基础 : HTML/CSS | 0x8.1CSS继承

    摘要:的一大特性继承,怎么样没听说过吧,没了它我们修饰网页时就变得十足的麻烦这是本节课准备的文件黑体这是文件夹黑体先看看,代码如下正文正文正文正文查看其它知识点位置对所有标签都起CSS的一大特性——继承,怎么样没听说过吧,没了它我们修饰网页时就变得十足的麻烦 这是本节课准备的文件   这是others文件夹   先看看index.html,代码如下 1 DOCTYPE html> ...

    tinysun1234 评论0 收藏0
  • 前端开发识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 评论0 收藏0
  • 前端开发识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Sike 评论0 收藏0
  • 前端开发识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    tracy 评论0 收藏0

发表评论

0条评论

evin2016

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<