1 css是什么?
层叠样式表,修饰网页结构
2 如何去使用css?
a.在html网页中,加入一个style标签,在这个style标签里面写css代码
b.可以直接把style里面的代码放到一个单独的文件中,通过link标签去引入 (常用)
c.直接在html开始标签的style属性里面去写css代码
以上三种方式都可以去设置网页都样式
3 css语法规则?要使得html标签有具体都样式,需要具备哪些条件?
a. style标签或者link标签或者style属性这几个都是写正确
b. 保证css代码和html代码产生关联,产生关联的方法有多种(id<==>#) 学习到底有多少方法可以关联html标签
c. 告诉浏览器要把html修饰成什么样子, 学习各种样式去修饰html标签

总结:css要学好,就是要学习两个东西:1 如何去关联(查找到对应html标签)2 如何去修饰这些标签

书写css的规则:

选择器{
属性名称:属性值;
属性名2:属性值2;
....
}
选择器:选择(查找)html标签的方法,(#box)
a.id选择器 #自定义一个名称
b.类选择器 .自定义一个名称
c.标签选择器 通过标签名称来选择对应的 html元素

总结:学习了以上三个选择器(找元素的方法),就可以查找到网页中任何的元素

剩下要解决的问题:如何去修饰html元素?边框,颜色,字体,背景?

4 具体的css规则

4.1 颜色的表示方式
a. rgb 模式 r 红色 g 绿色 b 蓝色 红绿蓝三原色可以组成n多颜色 rgb取值范围(0-255) 
b. 直接写颜色的名称
c. 十六进制 #9f0000 (最常用)
d. rgba(红色,绿,蓝,透明度) a的取值范围0-1 0表示完全透明 1 表示不透明
4.2 边框相关的属性
border-width 边框的宽度
border-style 边框风格
border-color 边框颜色

border:1px solid red; 简写形式
border-left 左边 border-right 右边 border-bottom 下边 border-top
border-radius 边框圆角

4.3 背景相关的属性
background-color 背景颜色
background-image 背景图片
background-repeat 是否重复
background-position 背景位置

4.4 字体相关属性
font-size: 80px;
/*设置字体颜色*/
color: red;
/*字体加粗*/
/*font-weight: bold;*/
/*定义字体类型*/
font-family:"微软雅黑",serif;

4.5 文本相关属性
text-align
text-indent
letter-spacing
line-height
总结:1 css是什么?css有什么用?
2 css如何去使用? 如何去找到对应html元素?如何去修饰这个元素?

找元素的方法-->css的选择器(id 类 标签)
掌握css的相关属性 颜色 边框 背景 文字 文本

CSS前叙的更多相关文章

  1. CSS前5课总结

    CSS<精通CSS.DIV网页样式与布局>视频前5课总结: 地对地导弹 第一课: 使用CSS控制页面: 1,行内样式 <p style="color:#0000FF; fo ...

  2. CSS(前)篇

    1.1CSS重点总结 1.1.1 选择器 1.1.2 盒子模型 1.1.3 浮动 1.1.4定位 1.2CSS介绍 概念: 层叠样式表或者级联样式表(Cascading Style Sheets) 层 ...

  3. 层叠样式表(CSS)

    层叠样式表(CSS) CSS(Cascading Style Sheet)中文译为层叠样式表.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS的引入就是为了使得HTML语言能够 ...

  4. 一个css和js结合的下拉菜单,支持主流浏览器

    首先声明: 本人尽管在web前端岗位干了好多年,但无奈岗位对技术要求不高.html,css用的比較多,JavaScript自己原创的非常少,基本都是copy改动,所以自己真正动手写时,发现基础非常不坚 ...

  5. webpack4 系列教程(五): 处理CSS

    这节课讲解webpack4中打包css的应用.v4 版本和 v3 版本并没有特别的出入. >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是 githu ...

  6. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

  7. CSS全局声明*与body的区别

    通常在写CSS前,为了保证兼容性及展示效果的一致,先会清除浏览器默认样式.此时有两种用法比较常用:1.*{};  2.body{}; 之前我比较偏好于用*{},比较便于把控样式的设置.一直也没试过bo ...

  8. 找不到css 路径问题

    今天进入一个网页的时候,一直报找不到css的错误,但是我的路径原来是正确的 后来找网络控制台,发现路径上多了一个listCommodity,是我controller里面的跳到这个页面的路径 然后我在& ...

  9. webpack4 处理CSS

    本篇讲解webpack4中打包css的应用.v4 版本和 v3 版本并没有特别的出入. 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> 原文地址. 评论或者 ...

随机推荐

  1. flex常用快捷键

    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...

  2. 170822、解决PLSQL记录被另一个用户锁住的问题

    1.查看数据库锁,诊断锁的来源及类型: select object_id,session_id,locked_mode from v$locked_object; 或者用以下命令: select b. ...

  3. java字符串的替换

    split也是用到了正则表达式 replace 是没有用正则表达式,全部替换 replaceAll 和replaceFirst是用了正则表达式 replaceAll替换所有,replaceFirst是 ...

  4. tomcat使用中的积累

    一.清理tomcat缓存 项目运行出错,如:找不到某个类或方法,可能是没有部署好,而不是项目本身的问题.这个时候要重新部署.tomcat有缓存,所以有时候需要清理tomcat缓存再重新部署. 常用的几 ...

  5. jupyter notebook快捷键速查手册

    jupyter notebook快捷键速查手册 Enter : 转入编辑模式 Shift-Enter : 运行本单元,选中下个单元 Ctrl-Enter : 运行本单元 Alt-Enter : 运行本 ...

  6. ubuntu常用技巧积累

    1.修改root密码,一般与用户密码不同 python@ubuntu:~$ sudo passwd[sudo] password for python: 输入新的 UNIX 密码: 重新输入新的 UN ...

  7. SVN cleanup 报错,清除svn的工作队列

    SVN 提交报错, Team->cleanup还是报错: Can't install '*' from pristine store, because no checksum is record ...

  8. mysql 数据操作 多表查询 子查询 虚拟表介绍

    子查询 把一个sql语句放在括号里 ,这个括号里sql语句查询结果其实就是一张表,并且是一个临时在内存里存在的虚拟表 可以用括号把一个查询sql语句括起来 得到查询的结果并且用as 为这张虚拟表起个别 ...

  9. you

    抑制幽门螺旋杆菌: 1.西兰花 鲜嫩的西兰花蔬菜,含有一种物质叫异硫氰酸酯,这种物质就是幽门螺杆菌的 " 天敌 ",可达到百分百抑制的作用,甚至还有医生给了它一个最强天然抗生素的称 ...

  10. Spark SQL入门用法与原理分析

    Spark SQL是为了让开发人员摆脱自己编写RDD等原生Spark代码而产生的,开发人员只需要写一句SQL语句或者调用API,就能生成(翻译成)对应的SparkJob代码并去执行,开发变得更简洁 注 ...