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

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

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

CSS:层叠式样式表

HTML:超文本标记语言

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

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

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

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

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

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

      <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是绝对位置,就是将控件固定在某处,比如说将空间固定在页面中间,无论你怎么拉伸或缩小浏览器,这个控件依旧处于页面中的中间位置

CSS样式表初学,比C#和JS简单的更多相关文章

  1. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  2. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  3. JavaScript对css样式表操作

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

  4. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  5. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  6. 漂亮的表格样式–>使用CSS样式表控制表格样式

    依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...

  7. 8 loader - 配置处理css样式表的第三方loader

    // 使用import语法,导入css样式表 import './css/index.css' // 注意:webpack,默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件: // 如果 ...

  8. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

随机推荐

  1. WeMall微信商城源码插件会员卡代码详情

    WeMall微信商城源码插件会员卡代码是用于商业推广的比较有效的方式,分享了部分比较重要的代码,供技术员学习参考 Index_index.html <html> <head> ...

  2. node c++多线程插件 第二天 c++指针

    虽然取名叫node多线程插件,但是目前还是在学习c++的情况. 今天谈一谈c++指针. c++指针就像是c#中的引用变量,例如一个Person类的实例zs{Name="张三",Ag ...

  3. 算法模板——线段树6(二维线段树:区域加法+区域求和)(求助phile)

    实现功能——对于一个N×M的方格,1:输入一个区域,将此区域全部值作加法:2:输入一个区域,求此区域全部值的和 其实和一维线段树同理,只是不知道为什么速度比想象的慢那么多,求解释...@acphile ...

  4. UITextField输入限制/小数/首位等

    - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS ...

  5. 简易漫画网站搭建-漫画喵Server版

    小喵的唠叨话:寒假的时候写了一个漫画爬虫,爬取了好几个漫画,不过一直没有找到合适的漫画阅读的工具.因此最近就试着自己写一个漫画的网站,放在公网上或者局域网里,这样就能随时随地用手机.Pad看漫画了. ...

  6. spring项目中dubbo相关的配置文件出现红叉的问题

    近来在eclipse中导入了一个web项目,但是发现项目上有红色的叉号. 原来是spring中关于dubbo的配置文件报错了. Multiple annotations found at this l ...

  7. 1-PHP基本概念

    PHP 概念:服务器脚本语言 静态网站:不支持交互的网站(html) 动态网站:支持数据交互的网站 实现动态网站的技术 实现技术 网站后缀 ASP .asp PHP .php .NET .aspx J ...

  8. 【2017-03-20】HTML基础知识、文字标记、图片标记、空格换行、表格、表格嵌套及布局、超链接

    一.HTML基础知识 HTML: 网站(站点) - 网页 网站是由一个或者多个网页组合起来的 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言 超越了文字的范畴 ...

  9. Python的字典dictionary

    创建: dict = {'Name': 'Zara', 'Age': 7, 'Class': 'First'};删除: del dict['Name']; # 删除键是'Name'的条目 dict.c ...

  10. 【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?

    (注:参考自官方英文文档V3.X版本) react-router是伴随着react框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用react-router时候,我们常常会使用其自带的路径 ...