乐趣区

关于java:CSS

一、CSS 概述
1、什么是 CSS
CSS:层叠样式表,是用于丑化、渲染网页的一门语言
和传统的 html 标签属性设置款式相比,应用 CSS 设置款式能够实现:将展现数据的 html 代码和设置款式的 CSS 代码进行拆散,能够加强网页的展现能力。

2、如何在 html 中引入 CSS
2.1. 在标签上的 style 属性外部增加 css 款式
<div style=”border:2px solid #FF0000;font-size:26px;background:pink;”>
这是一个 div…
</div>
这种形式是将 css 款式间接写在标签上的 style 属性外部, 只对以后标签无效, 无奈实现代码的复用, 而且容易造成页面构造的凌乱, 不利于前期的扩大和保护。所以不倡议大量应用。

2.2. 在 head 标签内的 style 标签外部增加 css 款式
这种形式是将所有的 css 款式在一个 style 标签外部对立治理, 没有将 css 代码写在标签上, 因而不会造成页面构造的凌乱, 而且能够实现代码的复用

2.3. 通过 link 标签引入内部的 css 文件

<!-- 引入内部的 demo.css 文件 -->
<link rel="stylesheet" href="demo.css"/>

这种形式是将所有的 css 代码写在一个 css 文件中对立治理, 真正的实现了: 将 html 代码和 CSS 代码进行拆散。能够实现代码的复用,也不会造成页面构造的凌乱。
举荐应用这种形式(特地是在企业开发中)

二、CSS 罕用选择器
所谓的选择器, 就是能够帮咱们在 html 中选中元素进行润饰的一门技术
1、元素名 / 标签名选择器
通过元素的名字或者标签的名字选中指定名称的所有标签
格局: 元素名 / 标签名{css 款式..}
span{} — 选中所有的 span 元素
div{} — 选中所有的 div 元素

2、class 类选择器
能够在标签上增加一个通用的属性 –class, 为元素设置所属的分组,class 值雷同的则为一组, 通过 class 值能够选中这一组的元素。
格局: .class 值{css 款式..}
.s1{} — 选中所有 class 值为 s1 的元素

<div class="s1"></div>
<span class="s1"></span>
<span class="s1"></span>
<span class="s1"></span>

另外,一个元素能够同时设置多个 class 值,例如:
<span class=”s1 s2 s3″>span111</span>
示意以后这个 span 元素同时属于 s1 分组和 s2 分组,如果 s1 和 s2 给这个 span 设置背景(但值不同),最终写在前面的会笼罩后面的(针对同一类选择器)。

如果是不同类的选择器,例如:应用元素名、类选择器、id 选择器选中同一个元素,设置雷同的属性,但值不同,优先级程序是:
id 选择器(100)> 类选择器(10)> 元素名选择器(1)

3、id 选择器
在标签上能够增加一个通用的属性 –id,id 是编号, 要求在整个网页中是举世无双的。通过 id 值,能够惟一的选中一个元素。
格局:#id 值 {css 款式..}
#p1{} 选中 id 值为 p1 的元素
#one{} 选中 id 值为 one 的元素

4、后辈选择器
在父选择器选中的元素外部, 选中指定的后辈元素
格局: 父选择器 后辈选择器{css 款式 …}
div span{} — 选中所有 div 外部的 span 元素
#d1 p{} — 选中 id 值为 d1 元素外部的 p 元素

5、属性选择器
能够通过元素的属性或属性值匹配元素
格局: 选择器[属性条件][属性条件]..{css 款式}
input[type=”text”]{} — 选中所有的文本输入框
input[type=”password”]{} — 选中所有的明码输入框
input[type=”checkbox”]{} — 选中所有的复选框
div[id]{} — 选中所有具备 id 属性的 div 元素

三、CSS 罕用属性总结
1、文本、字体相干属性

text-align:设置元素内文本程度排列形式
    left(居左, 默认)、center(居中)、right(居右)text-indent:设置文本首行缩进,百分比或像素值
    
text-shadow:设置字体暗影

letter-spacing:设置字符距离 / 间距

font-siz:设置字体大小
font-weight:设置字体粗细,100~900,bold,bolder,normal
font-family:设置字体,"微软雅黑","宋体","楷体" 等
color:设置字体色彩

2、背景相干属性

background 是一个综合属性, 能够同时设置背景色彩 / 背景图片 / 背景图片是否反复 / 背景图片的地位等
background-color: 设置背景色彩
background-image: 设置背景图片
background-repeat: 设置背景图片是否以及如何反复排列
backgronnd-position: 设置背景图片的地位
backgournd-size: 设置背景图片的大小

3、边框属性

border: 2px solid red; -- 同时设置边框的宽度、款式、色彩
border-width: 2px;
border-style: solid; double(双线) dotted(点状线) dashed(虚线)
border-color: red;

border-radius: 设置圆角边框

4、其余属性

width: 设置元素的宽度
height: 设置元素的高度
block: 块级元素 (div/p/h1~h6/form/table 等) 能够设置宽高
inline: 行内元素 (span/b/i/ u 等) 无奈设置宽高, 即便设置了也不起作用
inline-block: 行内块元素, 既具备行内元素的特点 (能够和其余行内元素或行内块元素显示在同一行) 也具备块级元素的特点(能够设置宽高)
--------------------------------
margin: 设置元素的外边距
margin-top: 设置元素的上外边距
margin-left: 设置元素的左外边距
margin-right: 设置元素的右外边距
margin-bottom: 设置元素的下外边距

margin: 10px 20px 30px 40px; /* 上 右 下 左 */
margin: 10px 20px 30px; /* 上 左右 下 */
margin: 10px 20px; /* 高低 左右 */
margin: 10px; /* 上下左右 */
--------------------------------

5、补充内容:色彩取值形式

形式一: 应用色彩的名称(英文单词)
    red green blue black yellow pink
    
形式二: #六位十六进制数(AABBCC==ABC)
    #FF0000 #00FF00 #0000FF #000000 #FFFF00 #FFFFFF

    #F00    #0F0    #00F    #000    #FF0    #FFF

形式三: rgb(255,255,255)
    rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)

退出移动版