今天咱们一起来看下CSS样式表的基本基础

经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚

那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS

CSS:层叠式样式表

HTML:超文本标记语言

HTML是负责展示你的网页上都有什么内容,都有什么

CSS是负责你的网页上的内容都怎么摆布,什么样的格局

那CSS到底怎么用呢?布局用HTML中的table不久可以布局么,根据具体要求进行切割就行,没必要用CSS布局,很多人都会这么想

那我要是告诉你一种简单快捷高效的布局方式,你还会用哪个?本来用table布局你需要三个工作日,那用CSS只需要半天就可以了,并且还会有很多人性化的展示,你会选择哪个?不要告诉我你习惯了table,不会去学别的了,这不现实,保质保量的背后一定要有效率的存在才能成立,不多废话,开始正题

咱们先来做这么一个东西,大家看一下效果

无论是看代码还是看效果,都是简单明确,指向性强,并且可调试的更加细腻,比方说第一行的字体大小,用HTML来写就是这样

1      <font size="7">阿拉斯加的辣椒素</font>

在HTML中size最大也就是7,并且是字体大小,而在CSS中调的是像素px,你可以一个像素一个像素的调,更加精确更加细腻,毕竟现在的显示器都到了4k了

那从代码量来看可能很多人认为CSS这个代码量并不比HTML中的少啊,别慌,往下看

就简单的随便写几个代码出来的效果,用table你要切多少次?好处不必多说,趋势的发展容不得你不去改变

今天咱么需要记住的东西还是比较多的

看下面

在CSS中最常用到的就是style:属性方式

所有的属性记得要写在style里面(其实我是靠江南style来记住的)

width:宽px(像素单位px,记得要带单位)

height:高(同上)

background-color:背景色red/#010101

font-weight:字体粗细

font-style:倾斜

text-decoration:line-through/under-line    下划线

color:颜色

font-size:尺寸  一般情况下就是12~16px, 需要展示用的时候可以用到18px

font-family:字体样式

float:left    流式布局

min=width:300px  最小宽度(用在float:left上的,起到限制作用,可以这么简单的理解下)

background-image:url(相对路径)

background-repeat:round    在设置背景图中,round选项会横向和纵向重复一张图片,不会被裁剪,但是可能会改变图像大小,如果换成space,那就不会被裁剪或者是改变大小

position:absolute是绝对位置,就是将控件固定在某处,比如说将空间固定在页面中间,无论你怎么拉伸或缩小浏览器,这个控件依旧处于页面中的中间位置

转载于:https://www.cnblogs.com/TheJoker/p/6610597.html

CSS样式表初学,比C#和JS简单相关推荐

  1. javascript中动态加载js、vbs脚本或者css样式表

    目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介 本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...

  2. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  3. (原创分享,改进版)CSS样式表速成!

    大话CSS样式表速成 程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以 吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...

  4. css样式表和选择器

    CSS样式----图文详解:css样式表和选择器 主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...

  5. (转)CSS样式表继承详解

    什么是css 继承? 要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在 ...

  6. CSS样式表初始化代码

    CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

  7. php html5 css样式,怎么在html页面写css样式表

    本教程操作环境:windows7系统.html5和css3版,该方法适用于所有品牌电脑. 在html页面写css样式表 1.首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css ...

  8. 前端技术分享:一个超级好用的CSS样式表

    大家可以经常逛一些程序员比较喜欢的论坛贴吧,你会有不一样的惊喜呢,今天小千就来给大家分享一个在GitHub上面发现的超级好用的CSS样式表,来看一看. 看名称本以为是一个动画库,但是看下来才发现这是一 ...

  9. html美化计算机,职称计算机Dreamwaver教程:CSS样式表滤镜

    职称计算机Dreamwaver教程:CSS样式表滤镜 导语:CSS是Cascading Style Sheet 的缩写.译作「层叠样式表单」.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的 ...

最新文章

  1. 菜鸟学java要多久_菜鸟学java,根本停不下来!
  2. 线程间通信————同步
  3. 程序员再也不担心请不到假了!
  4. 组合数学 算法导论 具体数学 博弈论 计算机科学数学
  5. 八数码——路径寻找问题
  6. Android实现按钮点击效果(第一次点击变色,第二次恢复)
  7. 计算机网络实验五静态路由与RIP协议,实验锐捷实训8-1--配置静态路由和rip协议...
  8. 【MYSQL笔记】编辑数据
  9. (21)pandas.drop与dropna方法
  10. fw150us的linux驱动下载,FAST FW150US2.0无线网卡驱动
  11. 对比只适用于有两个或多于两个层次的因子
  12. 基于 TMS320F2812 的直流无刷电机(BLDCM)的开环控制系统
  13. java查看jvm内存使用情况
  14. 更新下来的vue项目如何跑起来
  15. 计算广告小窥[下]要啥自行车!
  16. http referer 解释及用法
  17. Linux下,复制文件或移动文件失败:无法创建普通文件,权限不够。
  18. ES--IK分词器安装
  19. 2015异常问题解决方案经验总结(一)
  20. 通过SSH远程控制服务器

热门文章

  1. BW取月底月初日期函数
  2. ill-defined and being set to 0.0 in labels with no true samples
  3. 图算法入门3:活动网络-AOV网络和拓扑排序
  4. DF是什么计算机语言,x86汇编语言中的CLD和STD是什么? DF做什么?
  5. 有趣的python代码系列二:温柔的狮子
  6. 89C51控制晶体数码管显示可调时钟,且调时过程中闪烁调动位
  7. 全球名校AI课程库(32)| MIT麻省理工 · 医疗机器学习课程『Machine Learning for Healthcare』
  8. 阿里巴巴研究院开源的代码库有哪些
  9. 如何更换天籁车钥匙电池
  10. 探店视频批量剪辑神器如何设置抖音发布 接口参数