Bigger-Mai 养成计划,前端基础学习之CSS

在标签上设置style属性:
background-color: #2459a2;
height: 48px;
...

编写css样式:
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}

- class选择器 ******

.名称{
...
}

<标签 class=‘名称‘> </标签>

- 标签选择器
div{
...
}

所有div设置上此样式

- 层级选择器(空格) ******
.c1 .c2 div{

}
- 组合选择器(逗号) ******
#c1,.c2,div{

}

- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n=‘alex‘]{ width:100px; height:200px; }

PS:
- 优先级,标签上style优先,编写顺序,就近原则

2.5 css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />

3、注释
/* */

4、边框
- 宽度,样式,颜色 (border: 4px dotted red;)
- border-left

5、
height, 高度 百分比
width, 宽度 像素,百分比
text-align:ceter, 水平方向居中
line-height,垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗

6、float
让标签浪起来,块级标签也可以堆叠
老子管不住:
<div style="clear: both;"></div>

7、display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block,可以设置无法设置高度,宽度,padding margin
******
行内标签:无法设置高度,宽度,padding margin
块级标签:设置高度,宽度,padding margin

8、padding margin(0,auto)

9、position:
a. fiexd => 固定在页面的某个位置

b. relative + absolute

<div style=‘position:relative;‘>
<div style=‘position:absolute;top:0;left:0;‘></div>
</div>

opcity: 0.5 透明度
z-index: 层级顺序
overflow: hidden,auto
hover

10、background-image:url(‘image/4.gif‘); # 默认,div大,图片重复访
background-repeat: repeat-y;
background-position-x:
background-position-y:

示例:输入框

原文地址:https://www.cnblogs.com/mm-jj/p/10306776.html

时间: 2024-10-29 00:24:01

Bigger-Mai 养成计划,前端基础学习之CSS的相关文章

前端基础知识之css

前端基础知识之css   https://www.cnblogs.com/liwenzhou/p/7999532.html#autoid-4-5-0 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.   css就是修饰那些html元素的 其主要内容为两大块: 找到标签 和  修饰标签 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. cs

Bigger-Mai 养成计划,前端基础学习之HTML

HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: 写Html文件(充当模板的作用)@@@@ 数据库获取数据,然后替换到html文件的指定位置(web框架) 3.本地测试 找到文件路径,直接浏览器打开 pycharm打开测试 4.编写Html文件 doctype对应关系 html标签,标签内部可以写属性 注释:  <!-- 注释的内容 --> 20个标签 原文地址:https://www.cnblogs.com/mm-jj/p/10283700.html

前端基础学习分享

用a标签制作一个按钮为主线,然后围绕这个按钮,做一些效果样式等操作.附件中可以下载CSS参考手册. 一.工具 工欲善其事必先利其器.我们首先需要准备好调试工具,这里我就简单介绍几种,firefox.chrome以及IE. 1.firefox 我们用到的是firebug,非常好用,工具->附加组件.这里有一篇firebug教程. 安装好后按F12就可以直接调试了: 2.chrome chrome的调试工具默认就是自带的,也是按F12就可以出来,但这个调试工具还带了个手机的模拟器,可以用来调试手机页

前端基础学习-css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex

JAVA程序员养成计划之JVM学习笔记(2)-垃圾收集管理

本文对JVM垃圾收集进行说明,包括三种不同算法(标记复制.标记清除.标记整理),以及七种不同的垃圾收集器(Serial,ParNew,Serial Scavenge, CMS, Serial Old, Parallel Old, G1) 持续更新中- - 1. 垃圾回收相关概念 1.1. 垃圾回收对象 说到垃圾收集,首先得确定哪些是可回收的对象,这里涉及到java的四种引用方式,即强.软.弱.虚四类引用. 强引用:即普遍存在的对对象的引用,如指向通过new创建的对象 软引用:即程序运行非必须的对

前端基础学习一

一.html学习 web通信的本质就是浏览器作为客户端发送请求,服务端通过socket对象接受请求并相应的过程 例子: #!/usr/bin/python # --*-- coding:utf-8 --*-- import socket def main():     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)     sock.bind(('127.0.0.1', 8081))     sock.listen(5)     

前端基础学习--CSS3创建简单的网页动画 – 实现弹跳球动

基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div class="ball"></div> 我们将使用 Flexbox 布局,把球放到页面中间,尺寸为 100px * 100px,背景色为橘×××. CSS 代码: body { display: flex; /* 使用Flex布局 */ justify-content: center; /* 水平居中 */ } .ball { width: 100px;

JAVA程序员养成计划之JVM学习笔记(3)-JVM性能监控

本文对JVM的性能监控方法做整理. 持续更新中- - 1. JDK命令行工具 1.1. jps:虚拟机进程状况工具 JVM Process Status Tool, 显示系统内所有的HotSpot虚拟机进程,用于查看当前在jvm中运行的程序,包括虚拟机执行主类的名称以及进程ID. 1.2. jstat:虚拟机统计信息监视工具 JVM Statistics Monitoring Tool, 用于收集Hotspot虚拟机各方面的运行数据,包括类装载.内存.垃圾收集.JIT编译等运行数据. 1.3.

前端基础学习css

一.伪类 anchor用于控制链接效果 a:link (没有访问过的链接),定义链接的常规状态 a:hover(鼠标放在链接上的状态),用于控制显示效果 (常用) a:visited(访问过的链接) ,能清楚判断访问过的链接 a:active(在鼠标按下时的状态) 例子: Title.{             : : : }         .{             : : : }         .:.{             : }         :{             ::