Java复习第十四天学习笔记(CSS),附有道云笔记链接

【有道云笔记】十四 3.30 CSS

https://note.youdao.com/s/3VormGXs

一、CSS定义和基本选择器

CSS定义:cascading style sheet 层叠样式表。

语法:

选择器 {

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

属性名4:属性值4;

}

CSS使用:

1、通过选择器选择上标签

2、在选择的标签上设置样式

选择器分类:

标签选择器: p{}

类选择器: .className{}

id选择器: #id{}

一些常见的样式:

color:red; 文字颜色

font-size:40px;

background-color:blue;

text-decoration:underline;

text-decoration:none; //去掉下划线

二、CSS使用思想

一共有三种样式:50px字体、红色、下划线

正确的思路,就是用所谓"公共类"的思路,就是我们类就是提供"公共服务",比如有红、大、线,一旦携带这个类名,就有相应的样式变化。

总结:

1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。

2) 每一个类要尽可能小,有"公共"的概念,能够让更多的标签使用。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .big-font{ font-size: 50px; } .red{ color: red; } .underline{ text-decoration: underline; } </style> </head> <body> <p class="red big-font">段落1</p> <p class="red underline">段落2</p> <p class="big-font underline">段落3</p> <p class="big-font red underline">段落4</p> </body> </html>

三、CSS高级选择器

s1 s2 后代选择器

s1,s2 并集选择器(选择器组) ||

属性选择器

s1s2 交集选择器(既满足选择器1也满足选择器2) &&

s1>s2 直接儿子选择器,和后代选择器不一样

s1+s2 下一个兄弟选择器,后面紧挨着的第一个兄弟

四、盒模型

盒子中主要的属性就5个:width、height、padding、border、margin。

padding:内边距 margin:外边距

盒模型的示意图:

div+css

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: blue; margin: 2px; border: 2px solid red; padding: 4px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>

五、BootStrap

什么是Bootstrap?

简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

  • 框架:库 lib library

  • Bootstrap 让我们的 Web 开发更简单,更快捷;

  • 注意是 Bootstrap 不是 BootStrap!这是一个词,不是合成词,其含义为:n. 引导指令,引导程序

  • Bootstrap 是当下最流行的前端框架(界面工具集);

  • 特点就是灵活简洁,代码优雅,美观大方;

  • 其目的是为了让 Web 开发更敏捷;

  • 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的,并利用业余时间完成第一个版本的开发;

传统前端开发中问题:

1、重复、复杂、无意义的命名

2、结构冗余、页面错乱

Bootstrap全局样式特点:

1、代码简洁

2、风格统一

3、美观易用

Bootstrap提供了大量的全局样式,在基本的html标签上通过添加class设置

样式得到增强的效果。

相关推荐
艾莉丝努力练剑27 分钟前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
武子康1 小时前
Java-72 深入浅出 RPC Dubbo 上手 生产者模块详解
java·spring boot·分布式·后端·rpc·dubbo·nio
人生游戏牛马NPC1号2 小时前
学习 Flutter (三):玩安卓项目实战 - 上
android·学习·flutter
_殊途2 小时前
《Java HashMap底层原理全解析(源码+性能+面试)》
java·数据结构·算法
椰椰椰耶3 小时前
【Spring】拦截器详解
java·后端·spring
没有bug.的程序员4 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
深圳卢先生4 小时前
CentOS 安装jenkins笔记
笔记·centos·jenkins
u_topian5 小时前
【个人笔记】Qt使用的一些易错问题
开发语言·笔记·qt
没有羊的王K5 小时前
SSM框架学习——day1
java·学习
又菜又爱coding5 小时前
安装Keycloak并启动服务(macOS)
java·keycloak