前端学习之路-css选择器和布局
来源:互联网 发布:Mac air怎么下steam 编辑:程序博客网 时间:2024/05/19 09:10
css 选择器就是控制html中的标签的属性类似android 中控件的属性:
css 选择器大致分为以下几种:
1.标签选择器例如:p{};{}前就是选择器
2.ID选择器 例如<div id ="gsc">祝大家鸡年大吉</div> #gsc{ color:red}
3.class 选择器 eg:<div class=""gsc>祝大家鸡年大吉</div> .gsc{ color:red}
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
下面的代码是正确的(完整代码见右侧代码编辑器)
.stress{ color:red;}.bigsize{ font-size:25px;}<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
p{color:red;}p{color:green;}p{color:pink;}
多种样式会覆盖,类似变量布局:
1.默认流动布局,从上至下,并列的标签左右对齐()类似android 中线性布局
2.float 浮动布局 常用于块状标签如div span 等
3 .层模型有三种形式:
1、绝对定位(position: absolute)类似android 中绝对布局
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
right:100px;
top:20px;
}
2、相对定位(position: relative)类似android 中相对布局
3、固定定位(position: fixed)
0 0
- 前端学习之路-css选择器和布局
- 前端基础学习之CSS选择器
- 前端学习_01.css选择器
- web前端之css选择器
- 网页前端CSS之选择器
- css学习之路(2)--css选择器
- css学习之id和class选择器
- css学习之选择器
- CSS学习之选择器
- 前端知识路径之常用css选择器
- 前端学记之CSS-选择器
- 前端面试拾遗——CSS选择器、Flex布局、position
- DAY1,记录自己之CSS选择器,布局
- 前端知识汇总-----CSS选择器和CSS3新增选择器
- CSS学习之 选择器篇
- css学习笔记之选择器
- css学习之属性选择器
- BeautifulSoup学习之CSS选择器
- C#--------- 向应用程序添加代码
- 使用 PyInstaller 把.py转为 .exe
- Vim指令大全
- 设计模式(十三)抽象工厂模式
- lua 全排列
- 前端学习之路-css选择器和布局
- Leetcode——287. Find the Duplicate Number
- BFS
- 3D游戏引擎系列三
- cadi gc cracked cadi gc 3.06 cadi gc 3.10 cadi gc 3.08
- 使用rtl-usb接收无线电
- GStreamer基础教程08——pipeline的快捷访问
- Centos6.8 防火墙设置
- linux学习 (一 )、win10下安装ubuntu双系统