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 -----> ...
随机推荐
- 最大流&最小割&费用流模版
好久都没有搞博客了.想认真写又要准备文化课期末了. ISAP 流程: 原理就是dfs找增广路. 最基础的建反向边以便反悔就不说了. 但是记录一个dep(dis)表示层数,一开始BFS(从t开始,dis ...
- React简单教程-3-样式
前言 在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer 没有样式,显得平平无奇,这一篇我们将给他美化一下. CSS 文件 一般的做法,是在你的组件级目录下新 ...
- django框架4
内容概要 编辑删除功能编写 虚拟环境 django路由层版本区别 视图函数的返回值 JsonResponse对象 form表单上传文件 request其他方法 FBV与CBV(基于函数的视图.基于类的 ...
- sql语句中 int(1)与int(10)有什么区别?资深开发竟然能理解错
过完春节该投入战斗了,上班第一天发现了一个挺有意思的知识点给大家分享一下:一直以来的的误区我们都认为了int后面的跟的数字为最大显示宽度会对后面插入的参数会有限制,其实倒不是这样的 # 困惑 最近遇到 ...
- SQL server设置连接数
SQLServer查看及设置最大连接数 很多时候自己本地开发会遇到 ,打开几个连接正常访问 之后就报错误,这时候需要调整sqlserver 最大连接数. 1. 查询最大连接数 SELECT val ...
- Spring Data JPA系列2:SpringBoot集成JPA详细教程,快速在项目中熟练使用JPA
大家好,又见面了. 这是Spring Data JPA系列的第2篇,在上一篇<Spring Data JPA系列1:JDBC.ORM.JPA.Spring Data JPA,傻傻分不清楚?给你个 ...
- ABAP CDS DDHEADANNO
- sql-删除重复数据-oracle
删除重复数据 准备重复数据 create table mystudent ( stuno number , stuname varchar2(20), stuage number ); insert ...
- sql-扩展sql
复制表结构 create table 表名 like 被复制的表名; -- 仅复制表表结构 oracle不支持 复制表结构和数据(子查询方式) CREATE TABLE 表名 [AS] SELECT ...
- halcon变量窗口的图像变量不显示,重启软件和电脑都没用
有幸遇到halcon变量窗口的图像变量不显示,重启软件和电脑都没用这个沙雕问题,也是找了蛮久才发现解决办法特意记录一下. 这是正常情况下的窗口(左边)和图像变量不显示的窗口(右边): 解决方法: 鼠标 ...