JAVA学习--CSS知识总结（不断更新）

最新推荐文章于 2024-08-05 17:30:48 发布

芝士仙贝多多

最新推荐文章于 2024-08-05 17:30:48 发布

阅读量162

点赞数

文章标签： css

本文链接：https://blog.csdn.net/TuZiBuQing/article/details/107170477

版权

一、css`样式表的定义

css：（Cascading Style Sheets）层叠样式表；
分类及位置：内部样式区域

  <div style="position:absolute;top:0px">	
  <div style="background-color:gray;">background-color:gray</div>	
  <div style="background-color:#F00;">background-color:#F00</div>	
  <div style="background-color:#ffff00;">background-color:#ffff00</div>	
  <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
  <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
  <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>	
  <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>

二、内部样式表

当单个页面需要设置样式时，就应该使用内部样式表。
使用 <style></style>标签在文档<head></head>里面定义内部样式表

<head>
<style type="text/css" >  p{color:red;} 
</style>
</head>

从外部引入到样式分为两种：（注意写在head标签里面）
当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。
Link样式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
Html式： <style type="text/css">@import url("css.css");></style>
内联样式表（优先级高）
- 写在标签里面的样式
- 如：<p style="color:red;"></p>
表示给p标签里面的文字颜色设置为红色
区别：外链样式与导入样式
- link标签是属于xhtml范畴。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等。
- 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@impor则在整个页面加载完成后才加载。
- 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。

三、样式的优先级

相同权值情况下CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
- 内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式
层叠优先级是:
- 浏览器缺省< 外部样式表 < 内部样式表 < 内联样式
其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器
派生选择器以前叫上下文选择器，所以完整的层叠优先级是:
- 浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器< 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级
如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：
- 一个元素同时应用多个class，后定义的优先（即近者优先）

四、CSS选择器(非常重要！)

1.css选择器

class类选择器可以重复利用
id选择器唯一

2.标签选择器

什么是选择器：css选择器就是要改变样式的对象

选择器{属性:值;属性:值;}

标签选择器：页面中所有的标签都是一个选择器 p{color:red;}

3.`ID`选择器

选择id命名的元素以 # 开头 #p1{color:#0f0;}4.类选择器
class选择器，选择clas命名的元素以.开头 .first{color:#00f;}

4.包含选择器

选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p

span{color:red;}

5.属性选择器

选择包含某一属性的元素

a[title]{color:red;}选择包含title的a`标签

a[title][href]{color:red;} 选择包含title和href的a标签

`>` `+` 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）

p > span{color:red;}

相邻兄弟选择器：只选择后面的相邻兄弟元素

p + span{color:red;}

6.伪类选择器

a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）
a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）
a:hover {color:#FF00FF;}/* 鼠标移动到链接上
*/（可和其他标签结合一起用）
a:active {color:#0000FF;} / 选定的链接 /
注意:

伪类选择器的排序很重要，a:link a:visited a:hover a:active，
其他伪类选择器
- p:first-child{color:red;} /* 第一个p */
- :before 在元素之前添加内容。
- :after 在元素之后添加内容。
css优先规则
- 内联样式表-> ID 选择器—> Class 类选择器->标签选择器

五、背景属性

1.背景颜色的添加:

background:red;
backgronnd-color:red;

2.背景图片的添加：

background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);

3.背景的平铺

什么是平铺？平铺就是图片是否重复出现

不平铺：background-repeat:no-repeat;
水平方向平铺：background-repeat:repeat-x;
垂直方向平铺：background-repeat:repeat-y;
完全平铺：默认为完全平铺

4.背景的定位

背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
background-position的取值可为英文单词或者数值和百分值。
background-positon的英文单词取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right

background-positon的数值取值：background-position:x y；

positon的百分值取值：background-position:x% y%；

5.背景图片的大小

背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。
background-size的数值取值
- background-size:x y;
background-size的数值取值
- background-size:x% y%;

6.背景图片的滚动

背景图片是否随着内容的滚动而滚动由background-attachment设置
background-attachment:fixed;fixed 固定，不随内容的滚动而滚动
background-attachment:scroll; scroll滚动，随内容的滚动而滚动

六、文字文本属性

1.css文字文本属性：

文字属性
- color:red; 文字颜色
- font-size:12px; 文字大小
- font-weight:“bold” 文字粗细(bold/normal)
- font-family:“宋体” 文字字体
- font-variant:small-caps小写字母以大写字母显示
文本属性
- text-align:center; 文本对齐(right/left/center)
- line-height:10px; 行间距(可通过它实现文本的垂直居中)
- text-indent:20px; 首行缩进
- ```
text-decoration:none;
```
  - 文本线(none/underline/overline/line-through)
- letter-spacing: 字间距

七、盒子模型

1.什么是盒子模型？

盒子模型就是一个有高度和宽度的矩形区域
所有html标签都是盒子模型
div标签自定义盒子模型
所有的标签都是盒子模型
- class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

2.盒子模型的组成

盒子模型组成部分：
- 自身内容：width、height 宽高
- 内边距： padding
- 盒子边框： border 边框线
- 与其他盒子距离： margin外边距
- 内容+内边距+边框+外边距=面积
border 边框
- 常见写法 border:1px solid #f00;
单独属性：
- border-width:
- ```
border-style:
```
  - dotted 点状虚线
  - dashed（虚线）
  - solid（实线）
  - double（双实线）
- border-color (颜色)
padding 内边距
- 值：像素/厘米等长度单位、百分比
  - padding:10px; 上下左右
  - padding:10px 10px; 上下左右
  - padding:10px 10px 10px; 上左右下
  - padding:10px 10px 10px 10px; 上右下左（设置4个点–>顺时针方向）
单独属性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小
margin 外边距
- 值：与padding相同
- 单独属性：与padding相同
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并。

芝士仙贝多多

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVA学习--CSS知识总结（不断更新）

一、css`样式表的定义css：（Cascading Style Sheets）层叠样式表；分类及位置：内部样式区域 <div style="position:absolute;top:0px"> <div style="background-color:gray;">background-color:gray</div> <div style="background-color:#F00;">background-color:#F0
复制链接

扫一扫