CSS样式基础_0
1.CSS 样式使用方法
- 内联式、嵌入式和外部式
- 内联式,写在标签中
- 嵌入式css样式,写在当前的文件中
<style>...</style>
- 外部式,写在一个单独的文件中
<link href="base.css" rel="stylesheet" type="text/css" />
<!---rel="stylesheet" type="text/css" 是固定写法不可修改--->
- 三种方法的优先级别内联式 > 嵌入式 > 外部式,越容易修改的优先级越高。嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
2.CSS中的选择器
-
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{ 样式; }
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
-
标签选择器其实就是html代码中的标签如,html,body,h1,p等
-
类选择器
.类选器名称{css样式代码;}
类选器名称可以任意起名 -
ID选择器
ID选择器都类似于类选择符,但也有一些重要的区别:
- 1、为标签设置id=“ID名称”,而不是class=“类名称”。
- 2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
-
类选择器和ID选择器的区别
- 不同点
- 1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次
- 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班 ...大</p>
- 不同点
-
子选择器
子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素的样式。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代 -
通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
* {color:red;}
-
伪类选择符
为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}
-
分组选择符号
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)h1,span{color:red;}
3.继承层叠和特殊性
-
继承
CSS的某些样式是具有继承性的,继承即父元素的样式不仅应用于其本身还应用于其子元素,如
color
,但border
等样式不具备继承性。 -
特殊性
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
权值越高样式的优先级越高,哪个描述更具体就用哪个样式。
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
-
层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用.
-
重要性
使用
!important
来设置某些样式具有最高属性p{color:red!important;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
4.CSS格式化排版
-
字体、字号、颜色、粗体、斜体、下划线
现在网页一般喜欢设置“微软雅黑”
body{font-family:"Microsoft Yahei";font-size:12px;color:#666} a{font-weight:bold;font-style:italic} span{text-decoration:underline;}
-
设置段落缩进、行间距、中文字间距、字母间距
p{text-indent:2em;line-height:1.5em; letter-spacing:50px;word-spacing:50px;}
-
对齐
div{text-align:center}
ref:
[1] https://www.imooc.com/learn/9
- Go语言内存分配器的实现
- Go 语言 数据库操作之链接数据库实现
- 对于tnsping的连接超时的功能补充(r9笔记第3天)
- struts2拦截器源码分析
- Go语言学习(一):hello world
- JAVA基础知识点:内存、比较和Final
- python django 学习(一)数据库 目的根据已有BBS建立新的网站步骤
- SpringMVC中@RequestMapping的基本用法
- Java面试系列13
- 【Go 语言 时间相关操作 demo】
- redis AOF保存机制
- 用 TensorFlow 让你的机器人唱首原创给你听
- 不用synchronized块的话如何实现一个原子的i++?
- Oracle升级中的参数补充(r9笔记第2天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Moriarty Corp靶场攻略
- Chatterbox(hack the box系列)
- 用云开发实现在线五子棋h5(含源码)
- Duo RDP双因素身份验证防护绕过
- Hackbar 2.3.1插件许可证限制绕过
- Linux系统下安装JDK
- MATLAB借助openai gym环境训练强化学习模型
- java作业篇,闰年,BMI
- 主题hondsome折腾,css修改
- typecho显示网站运行时间
- 从 Dagger 到 Hilt,谷歌为何执着于让我们用依赖注入?
- 为什么非对称加密比对称加密慢?
- 如何优化Nginx的处理性能
- 一键生成前后端代码,Mybatis-Plus代码生成器让我舒服了
- 各类好玩免费API推荐,强烈建议收藏