java-前端之css
css样式:
<!-- 内联样式:在元素的style属性内写样式 -->
<h2 style="color: red;">愿你单枪匹马,亦能所向披靡!</h2>
<!-- 内部样式:在head内部的style标签里写样式 -->
<style type="text/css" >
/*css的注释是这样的*/
h2{color: blue;}
</style>
<!-- 外部样式:在独立的css文件内写样式href是css文件的路径 -->
<link rel="stylesheet" href="my.css"/>
css样式规则:
1.继承性,父元素(字体,颜色)的某些样式可以被子元素继承
2.层叠性:给一个元素增加不同的声明,效果会叠加
3.优先级:给一个元素增加相同的声明,效果以后者为准,也叫就近原则.
css类选择器:
/*1.元素选择器*/
/*2.类选择器:根据class属性选择一类元素*/
.female{color: pink;}
/*3.id选择器:根据ID属性选择唯一的元素*/
#where{color: lime;font-size: 20px;}
/*4.选择器组:写出一组选择器,可以选中其中每个选择器对应的并集*/
.female,#where{font-weight: bold;}
/*5.派生选择器:*/
/* 1)选择某元素的子孙*/
#p5 b {color: orange;}
/* 2)选择某元素的儿子*/
#p5>b{font-size: 100px;}
p a{font-size: 50px;}
/*6.伪类选择器:选择某状态下的元素*/
/*1)选择未访问过的超链接*/
a:LINK {color:green;}
/*2)选择已经访问过的超链接*/
a:VISITED {color: red;}
/*3)选择激活态的按钮*/
.btn:ACTIVE {background: red;}
/*4)选择有焦点的框*/
.txt:FOCUS{background-color: yellow;}
/*5)选择悬停状态*/
.btn:HOVER {color: gray;width: 50px;}
img:HOVER{width: 250px;height: 250px;}
css之边框--border:
/*1.给标题单边边框*/
h1{border-left: 15px solid blue;border-right: 15px solid red;border-bottom: 15px solid yellow;border-top: 15px solid green;}
/*2.给段落四边同时加边框*/
p{border: 1px dashed red;width: auto;height: 60px;overflow: auto;}
day03
/*1.四边设置相同的边距*/
#d1{padding: 20px;margin: 40px;}
/*2.四边设置不同的边距--顺序是上右下左*/
#d2{padding: 10px 20px 30px 40px;margin: 10px 20px 30px 40px;}
/*3.单边设置边距*/
#d3{padding-top: 20px;margin-left: 30px;}
/*4.对称设置边距 -- 上下 空格后左右*/
#d4{padding: 20px 40px;margin: 50px 70px;}
/*5.对称设置的一个特例:当左右外边距设置为auto时,元素会水平居中*/
#d5{margin: 20px auto;}
我是初学者,如有更新不好的,欢迎这位大神指出,谢谢大家!
更多精彩以后更新,转载注明!
java-前端之css的更多相关文章
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- java前端与后端怎么选??
想做这个行业,就应该了解职能以及技能需求,这样学习才能更高效.我知道一些刚刚入行的小伙伴不清楚前端.后端.到底指的是什么?两者直接的区别 前端开发 前端开发主要涉及网站和App,用户能够从浏览器上或A ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇:web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
随机推荐
- Java - happens-before
Java - happens-before JSR-133对 happens-before 关系的定义如下: 如果一个操作 happens-before 另一个操作,那么第一个操作的执行结果将对第二个 ...
- Python 3函数的参数冒号注释
Python 3.7版本,函数的参数可以通过冒号来进行注释 def f(ham: str, eggs: str = 'eggs') -> str : print("Annotation ...
- 点亮Arduino内置的LED灯
更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年9月3日. 15块软妹币的板子镇楼. 上一篇配置好了开发环境,然后就开始搞第一个小灯的实验了. 原理相当的简单, ...
- 一些好用的javascript/typescript方法封装分享
1.数字格式化 JS版-直接写到原型链上 /** * @author: silencetea * @name: * @description: 数字格式化,默认每三位用英文逗号分隔 * @param ...
- Windows下新建隐藏用户名
Windows下新建隐藏用户名,防止忘记密码
- Jmter入门教程
Jmter入门教程 本文已同步到公众号,欢迎关注: 1. 简介 Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件.相比Loadrunner而言,JMeter小巧轻便且免 ...
- Java 将HTML转为Word
本文以Java代码为例介绍如何实现将HTML文件转为Word文档(.docx..doc).在实际开发场景中可参考此方法来转换.下面详细方法及步骤. 在编辑代码前,请先在程序中导入Spire.Doc.j ...
- EEPROM存储电路(M24C64芯片)
电可擦写可编程只读存储器(Electrically Erasable Programmable Read-only Memory, EEPROM)实现掉电情况下保存数据,设计温湿度变送器采用M24C6 ...
- Aborted wiping of zfs_member.1 existing signature left on the device.Aborting pvcreate on /dev/sda
看意思是有什么签名在上面,创建不了逻辑卷,确认数据备份的情况下执行对应的下面命令: wipefs --all --force /dev/sdax
- NC20566 [SCOI2010]游戏
题目链接 题目 题目描述 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属 ...