什么是CSS,CSS的使用
一、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的使用相关推荐
- [JS,CSS] - CSS圆角框组件
来源:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html 下载地址:http://files.cnblogs.com/biny ...
- simple css 汉化,Simple CSS(CSS文档生成器)
Simple CSS(CSS文档生成器)简介 Simple CSS(CSS文档生成器)简介一:Simple CSS是一款CSS文档生成器,帮助网页开发人员快速生成CSS样式,Simple CSS使用非 ...
- [css] css常用的布局方式有哪些?
[css] css常用的布局方式有哪些? 1:圣杯布局 2:双飞翼 3:flex 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通 ...
- [css] css的属性content有什么作用呢?有哪些场景可以用到?
[css] css的属性content有什么作用呢?有哪些场景可以用到? content属性与 ::before 及 ::after 伪元素配合使用生成文本内容通过attr()将选择器对象的属性作为字 ...
- [css] CSS的伪类和伪对象有什么不同?
[css] CSS的伪类和伪对象有什么不同? 伪类是给当前选中节点添加新样式, 伪对象是给当前选中节点添加伪元素. 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析. 个 ...
- [css] CSS中的calc()有什么作用?
[css] CSS中的calc()有什么作用? 用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算, 不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效 个人简介 我是歌谣, ...
- [css] css怎样使每个字符宽度一样?
[css] css怎样使每个字符宽度一样? 控制字符间距:letter-spacing:1em;[em,px,rem] 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷. ...
- [css] css中的border:none和border:0px有什么区别?
[css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- [css] css的linear-gradient有什么作用呢?
[css] css的linear-gradient有什么作用呢? 概念:线性渐变,向下/向上/向左/向右/对角方向,为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色 ...
- [css] css怎么更改表单的单选框或下拉框的默认样式?
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
最新文章
- echarts python源码_基于Echarts的微代码开发平台SmartChart, 免费开源使用
- 在耗时操作结束之前 销毁tableView 如何让tableViewCell 销毁
- iis 跨域_织梦会员登录二级域名不能跨域
- Linux 命令之 hostnamectl -- 查看/修改当前主机的信息
- 【数据库】navicat运行sql文件报错
- 受疫情影响 蔚来整车生产已经暂停
- 比1亿像素还要更厉害!三星Galaxy S11相机应用代码泄露天机...
- 【python 笔记】赋值语句和基本输入输出
- VUE PDF上传预览下载(vue-pdf)
- 论文总结(3):Intelligent Traffic Monitoring Systems for Vehicle Classification: A Survey
- 计算机界十位顶级人物!
- 京东图书详情页定价获取
- 小米手环7模拟加密门禁卡
- android输入法框架分析,Android与iOS输入法开发框架比较谈
- searchsploit 漏洞搜索
- 符号在excel中的引用_如何在Excel中添加项目符号
- sql入门--增删改查
- android 虹软 例子,虹软离线人脸识别源码Android版本
- css样式的叠加,CSS的叠加
- OpenHarmony开源社区快速入门(一)
热门文章
- 前端必备:常用品牌logo图标的官方颜色表示
- C#采集三菱QPLC数据,写入MYSQL数据库
- 计算机软件的安装步骤及注意事项,组态软件介绍以及安装注意事项
- iOS GIF 格式动画 图片显示
- 【Maching Learning】深度学习常用评价指标(分类+回归)
- 关于我的计算机的英语作文,关于电脑的英文作文精选5篇
- 缓和曲线计算机编程,缓和曲线起点
- Mission Planner初学者安装调试教程指南(APM或PIX飞控)2——安装与更新
- github push时提示Username for ‘https://github.com‘ 解决办法
- MT9V034摄像头的调试经验