web基础——CSS层叠样式表
目录
- CSS的作用:
- 基本语法
- 选择器
- 1.类选择器
- 2.id选择器
- 3.标签选择器
- 4.包含选择器
- 5.伪类
- 选择器的优先级
- 子选择器
- 相邻选择器 div +p
- 相邻所有选择器 div ~p
- 属性选择器 input[type=“password”]
- 过滤选择器
CSS的作用:
实现了样式和html的代码分离
弥补html对属性的控制不足
精确的控制页面的布局
可以提高页面的执行效率
css有特殊的功能
特性:继承性,层叠性
基本语法
<style type="text/css">
选择器{属性1:属性值;属性2:属性值......}
</style>
选择器
1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类
1.类选择器
标签后面加上class,双引号里面的内容就是类选择器值
.p1{ color:red }——点后面的括号{}里面可以定义具体的样式
<html><head><title> New Document </title><style>.p1{ color:red }</style></head><body><p>查看文字内容</p><p>查看文字内容</p><p class="p1">查看文字内容</p><p>查看文字内容</p><p>查看文字内容</p></body>
</html>
2.id选择器
标签后面加上id并赋值,在内联样式style里面或者css文件里面可以给对应的标签添加样式
<html><head><title> New Document </title><style>#p2{ font-size:100px;}</style></head><body><p id="p2">查看文字内容</p><p>查看文字内容</p><p class="p1">查看文字内容</p><p>查看文字内容</p><p>查看文字内容</p></body>
</html>
3.标签选择器
在css样式里面直接标签名
<html><head><title> New Document </title><style>p{color:red;}</style></head><body><p>查看css的效果</p><p>查看css的效果</p><p>查看css的效果</p></body>
</html>
4.包含选择器
<html><head><title> New Document </title><style>ol ul li{font-size:50px; color:red}</style></head><body><ol><li>zhangsan<li>23<ul><li>lisi</ul> </ol></body>
</html>
5.伪类
1.未连接 a:link2.已经访问链接 a:visited3.进入链接 a:hover4.激活(按下)状态 a:active
其中的hover 和active 可以用于其他控价
<html><head><title> New Document </title><style>a:hover{font-size:50px;}</style></head><body><a href="#">我的链接</a></body>
</html>
选择器的优先级
在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器
!important>内联样式>id选则器>class选则器>标签选择器
优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
子选择器
div >p{
意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的
}
相邻选择器 div +p
div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p
之间隔着一个元素 那是选不中的
}
相邻所有选择器 div ~p
div ~p{
意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素
}
属性选择器 input[type=“password”]
a[title] {
意思是选中 a标签 里面只要有 title 这个属性的 都会选中
}
a[title=num1] 意思是选中 属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签a[title|=num] 选中title的属性值以num-连接的a标签 如<a title=“num-ai”>
a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中
比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签]a[title*=num] 选中title属性值 包含num的都能选中 例如<a title=“mynumaaaa”>
a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签 <a title=“num” name=“lisi”>
过滤选择器
:last-child p:last-child 选择属于其父元素最后一个子元素 <p> 元素。
:not(selector) li:not(#my) 选择id不是my的所有li元素。
::selection 当鼠标左键选中文本时 这里注意是两个冒号 前面不加任何标签
:root 选择文档的根元素。 跟* 这个选择器很相似
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。
例如<p></p> 这里面没有任何子标签和文本 就会被选中
web基础——CSS层叠样式表相关推荐
- Web前端——CSS层叠样式表
>css概述:层叠样式表 样式:调整HTML的显示效果(大小,颜色,对齐,边框,阴影,行高,文本样式,文字,阴影,内填充,外边距,定位,过渡,动画) HTML中就可以进行一些基本的样式调整,cs ...
- [C1进阶之路-Web基础] CSS背景属性
目录 往期回顾,专栏一览
- 全栈 - 20 Web 基础 网页的血肉 CSS
这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础 网页的血肉CSS. HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式. 什么是CSS CSS全拼是Cascadin ...
- Web开发基础——CSS
学习目标: • CSS和HTML整合 • CSS选择器的使用 学习内容: • css和html整合 ...
- Web基础总结(HTML、CSS等)
Web基础总结 前言 HTML 元素和属性 内容元素 head meta title base link body 表单元素 功能元素 其他元素 分组元素 页面交互元素 语义元素 全局属性 style ...
- css层叠样式表——css基础介绍
css层叠样式表第一天 css层叠样式表01 css层叠样式表第一天 css介绍 css语法 html标签全局属性 引入css样式的方式 知识点应用 css介绍 css是Cascading Style ...
- css层叠样式表基础学习笔记--第一章 css简介及引入
第一章 css简介及引入 1-01 css简介 1-02 css优缺点 1-03 css书写格式 1-04 css引入格式 行内样式 内部样式 外部样式 导入样式 1-05 css注释 1-01 cs ...
- Web云笔记--CSS
CSS CSS CSS Web自学第二阶段之CSS 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出 ...
- 20145233《网络对抗》Exp8 Web基础
20145233<网络对抗>Exp8 Web基础 实验问题思考 什么是表单? 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框.隐藏域 ...
最新文章
- 0218 图片的添加
- POJ 1703 Find them, Catch them
- 谈阿里核心业务监控平台SunFire的技术架构
- android studio 写文件,在Android Studio中从我自己的类读取和写入文本文件
- Linq查询datatable的记录集合
- Burpsuite Web渗透-扫描工具(中间攻击,渗透大牛都用来修改包和监视包)
- MYSQL的C 语言接口
- 分解原理_葛兰维均线的数学拟合原理--傅立叶函数的分解的应用
- Linux 网络编程基础(一) ---------------客户端/服务器的简单实现
- hibernate 调用存储过程
- 如何证明永动机不可能制造出来
- 【AtCoder】AGC007
- 一级建造师考试备考顺序
- 2022电工(中级)操作证考试题库及模拟考试
- android开发常用app有哪些,【推荐收藏】安卓开发中必备的那些神器APP
- PP-ShiTu 库管理工具使用教程
- 无敌哈拉少(奋起反抗的人)
- 爱奇艺体育与巴塞罗那足球俱乐部达成合作;中国机械工业百强、汽车工业整车二十强公布 | 美通企业日报...
- RINEX2.10、2.11 : (观测值文件)不同观测值类型对比
- 华清远见嵌入式培训_第一周回顾与反思
热门文章
- 天使动漫 泉 此 方 桌面跳舞精灵
- 定护你一世周全 《大圣归来》影评剧透慎点
- Python绘制六角星、多角星、小太阳、小风车《打包好的各种游戏源码,画图源码》
- Chrome浏览器设置小窗口视频
- 新农慕课python答案第零周答案_智慧树慕课答案农产品加工工艺学参考答案公众号...
- JavaWeb用户信息管理系统-添加用户的实现
- 小内存处理1G或10G大小的log文件
- TortoiseGit的具体操作
- linux虚拟机的CentOS 7版本root用户和普通用户的密码破解过程
- linux+c+时间间隔+ns,浅析 Linux 中的时间编程和实现原理,第 1 部分: Linux 应用层的时间编程...