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的更多相关文章

  1. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

  2. java前端与后端怎么选??

    想做这个行业,就应该了解职能以及技能需求,这样学习才能更高效.我知道一些刚刚入行的小伙伴不清楚前端.后端.到底指的是什么?两者直接的区别 前端开发 前端开发主要涉及网站和App,用户能够从浏览器上或A ...

  3. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  4. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  7. 第二篇:web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  8. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  9. 前端基础——css

    前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.

  10. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

随机推荐

  1. ML第6周学习小结

    本周收获 总结一下本周学习内容: 1.学习了<深入浅出Pandas>的第六章:Pandas分组聚合 6.1概述 6.2分组 6.3分组对象的操作 我的博客链接: Pandas 分组聚合 : ...

  2. 参与 2022 第二季度 Flutter 开发者调查

    2022 Google I/O 大会正式落下帷幕,Flutter 作为 14 个开发者产品和平台中的一款,吸引了来自全球的很多开发者们的关注.随着全国很多地方已经进入夏季,Flutter 今年第二季度 ...

  3. 6. Docker-compose配置Dockerfile使用

    Docker-compose实际是管理基于一个镜像启动的容器的. 使用docker-compose.yml文件以及Dockerfile文件在生成自定义镜像的同时启动当前镜像,并且由docker-com ...

  4. TDSQL|三篇论文入选国际顶会SIGMOD,厉害了腾讯云数据库

    好消息!6月13日,腾讯云数据库三篇论文再次入选数据库行业顶会SIGMOD,被SIGMOD 2022 Research Full Paper(研究类长文)收录. 本次被收录的研究成果中,新型数据结构设 ...

  5. 获取在线ip

    /** * 获取在线IP * @return String */ function getOnlineIp($format=0) { global $S_GLOBAL; if(empty($S_GLO ...

  6. VirtualBox虚拟机安装Ubuntu系统后,增加内存空间和处理器核心数

    对于Linux爱好者而言,初次使用虚拟机时,一般都会使用默认的设置,例如硬盘空间.内存空间等等. 而往往在熟悉之后,安装了某些必要的软件,或者熟悉了实际的开发场景后,却发现原本给虚拟机分配的物理资源是 ...

  7. 用Python爬取文章,并转PDF格式电子书

    wkhtmltopdf [软件],这个是必学准备好的,不然这个案例是实现不出来的 获取文章内容代码 (https://jq.qq.com/?_wv=1027&k=QgGWqAVF) 发送请求, ...

  8. idea中enter键不能换行

    idea中enter键不能换行 按enter键只能往下移动 如下图 解决办法: 方式一:按住window + Insert 方式二: 按住Fn + Insert 两种方式总有一种可以 之后就可以按en ...

  9. NC20276 [SCOI2010]传送带

    NC20276 [SCOI2010]传送带 题目 题目描述 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P,在CD ...

  10. 强化学习-学习笔记9 | Multi-Step-TD-Target

    这篇笔记依然属于TD算法的范畴.Multi-Step-TD-Target 是对 TD算法的改进. 9. Multi-Step-TD-Target 9.1 Review Sarsa & Q-Le ...