一、css:

1.基本选择器

2.高级扩展选择器

3.能够使用常用的css属性

4.能够使用盒子模型的属性去调整网页(万能)

5,完成一个网页的注册。(登入首页)

二、什么是css:

2.1概念:

层叠样式表:Cascade Style Sheet

2.2作用:美化网页

规范

说明

大括号外面的单词或符号

选择器,选中要操作的元素或者标签

大括号

每组样式开始和结束

样式名

如:text-align是固定样式名,不能自己命名

冒号

分隔样式名和样式值

样式值

每个样式名对应的样式值,也是固定的,不可以输入不存在的

分号

每一个样式一分号隔开

注释

和java相同

三、CSS在网页中的三种位置

目标:

1.CSS的规则

2.CSS的三种表现形式

三种样式的位置:

以后真实项目中,第三种是最佳选项

2.三种样式的优先级:

什么级:

第一种>第三种>第二种

被覆盖的情况下:

行内样式>外部样式>html中style标签样式(内部样式)

小结:

1.行内样式有什么特点:只对一个标签起作用,style作为标签的属性使用

2.内部样式有什么特点:对整个网页起作用,在head以style标签的格式出现

3.外部样式有什么特点:以CSS文件格式独立于html之外可以重用,对多个网页文件起作用(引用),外部样式最大的不同作用就是能够给代码实现解耦。

3.CSS基本选择器

选择器的作用:

在操作样式之前,用选择器元素(某个标签)

(3.1)标签选择器

语法:

标签名{}

(3.2)类选择器:

1.先给标签进行分类,通过class属性

2.在通过类名进行选择

语法:

.类名{}

(3.3)ID选择器:

1.给元素的属性加一个ID值

2.再通过ID选择元素,建议一个网页的ID要唯一

语法:

 #id{}

(3.4)通用选择器:选中整个网页的所有元素

语法:

*{
}

选择器分类

作用

语法

备注

标签选择器

通用标签名来选择元素

标签名{}

类名选择器

通过类名选择元素

.类名{}

前提:先使用class属性给元素进行分类

id选择器

通过id的值选择元素

#id{}

建议,在同一个网页中id必须是唯一

通用选择器

选中网页中的所有元素

*{}

4.CSS选择器的优先级

id选择器>类名选择器>标签选择器>通用选择器

5.Css扩展选择器:

层级选择器:在基本的选择器基础上,进行各种组合,形成更加的灵活选择方式

属性选择器:通过属性名选择元素

语法:

层级选择器:父选择器 子选择器{}

例子:ul li{}  ,ul lo{}, tr td{}

属性选择器:标签名[]{}

例:input[ typle]{}

扩展选择器

格式

作用

语法符号

层级选择器

父选择器 子选择器

选择某个选择器下面的子元素

空格

属性选择器

[属性名]

只要包含这个属性的标签都会被选中

标签名[属性]

指定一个标签选择器,这个标签还要包括式属性,属性值没有要求

标签名[属性名="属性值"]

优先级:标签名[属性名="属性值"]>标签名[属性]>[属性名]

什么是CSS,CSS的使用相关推荐

  1. [JS,CSS] - CSS圆角框组件

    来源:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html 下载地址:http://files.cnblogs.com/biny ...

  2. simple css 汉化,Simple CSS(CSS文档生成器)

    Simple CSS(CSS文档生成器)简介 Simple CSS(CSS文档生成器)简介一:Simple CSS是一款CSS文档生成器,帮助网页开发人员快速生成CSS样式,Simple CSS使用非 ...

  3. [css] css常用的布局方式有哪些?

    [css] css常用的布局方式有哪些? 1:圣杯布局 2:双飞翼 3:flex 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通 ...

  4. [css] css的属性content有什么作用呢?有哪些场景可以用到?

    [css] css的属性content有什么作用呢?有哪些场景可以用到? content属性与 ::before 及 ::after 伪元素配合使用生成文本内容通过attr()将选择器对象的属性作为字 ...

  5. [css] CSS的伪类和伪对象有什么不同?

    [css] CSS的伪类和伪对象有什么不同? 伪类是给当前选中节点添加新样式, 伪对象是给当前选中节点添加伪元素. 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析. 个 ...

  6. [css] CSS中的calc()有什么作用?

    [css] CSS中的calc()有什么作用? 用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算, 不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效 个人简介 我是歌谣, ...

  7. [css] css怎样使每个字符宽度一样?

    [css] css怎样使每个字符宽度一样? 控制字符间距:letter-spacing:1em;[em,px,rem] 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷. ...

  8. [css] css中的border:none和border:0px有什么区别?

    [css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...

  9. [css] css的linear-gradient有什么作用呢?

    [css] css的linear-gradient有什么作用呢? 概念:线性渐变,向下/向上/向左/向右/对角方向,为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色 ...

  10. [css] css怎么更改表单的单选框或下拉框的默认样式?

    [css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...

最新文章

  1. echarts python源码_基于Echarts的微代码开发平台SmartChart, 免费开源使用
  2. 在耗时操作结束之前 销毁tableView 如何让tableViewCell 销毁
  3. iis 跨域_织梦会员登录二级域名不能跨域
  4. Linux 命令之 hostnamectl -- 查看/修改当前主机的信息
  5. 【数据库】navicat运行sql文件报错
  6. 受疫情影响 蔚来整车生产已经暂停
  7. 比1亿像素还要更厉害!三星Galaxy S11相机应用代码泄露天机...
  8. 【python 笔记】赋值语句和基本输入输出
  9. VUE PDF上传预览下载(vue-pdf)
  10. 论文总结(3):Intelligent Traffic Monitoring Systems for Vehicle Classification: A Survey
  11. 计算机界十位顶级人物!
  12. 京东图书详情页定价获取
  13. 小米手环7模拟加密门禁卡
  14. android输入法框架分析,Android与iOS输入法开发框架比较谈
  15. searchsploit 漏洞搜索
  16. 符号在excel中的引用_如何在Excel中添加项目符号
  17. sql入门--增删改查
  18. android 虹软 例子,虹软离线人脸识别源码Android版本
  19. css样式的叠加,CSS的叠加
  20. OpenHarmony开源社区快速入门(一)

热门文章

  1. 前端必备:常用品牌logo图标的官方颜色表示
  2. C#采集三菱QPLC数据,写入MYSQL数据库
  3. 计算机软件的安装步骤及注意事项,组态软件介绍以及安装注意事项
  4. iOS GIF 格式动画 图片显示
  5. 【Maching Learning】深度学习常用评价指标(分类+回归)
  6. 关于我的计算机的英语作文,关于电脑的英文作文精选5篇
  7. 缓和曲线计算机编程,缓和曲线起点
  8. Mission Planner初学者安装调试教程指南(APM或PIX飞控)2——安装与更新
  9. github push时提示Username for ‘https://github.com‘ 解决办法
  10. MT9V034摄像头的调试经验