Day02 CSS

最新推荐文章于 2022-07-27 18:54:29 发布

何以所谓

最新推荐文章于 2022-07-27 18:54:29 发布

阅读量180

点赞数

分类专栏： JAVAEE笔记文章标签：选择器属性设置填充-盒子模型定位和浮动 CSS

本文链接：https://blog.csdn.net/weixin_44695396/article/details/90411690

版权

JAVAEE笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一使用样式

注意：

css声明要以分号;结束，声明以{}括起来

建议一行书写一个属性

若值为若干单词，则要给值加引号，如 font-family: "agency fb";

如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的(学到js时就会有所了解)。

css 层叠样式表
    行内样式表:元素上提供一个style属性,属性值中给样式
    内部样式表:html的内部,提供一个style标签对,标签对中给样式
    外部样式表:定义一个样式表文件,定义样式,把这个文件引入到指定的html页面
    样式:
        名称:值;
    选择器: 选择到某个元素
    选择器{
        样式1;
        样式2;
        ...
    }
样式表的优先级:有限显示
    谁离元素更近就优先显示谁

二选择器

1.基本选择器

优先级: id>class>元素>通配符

(1)通用选择器

*
    作用到所有元素

* {

color: orange;

}

  清除浏览器默认样式:
      *{
        padding:0;
        margin:0;
      }

(2)元素选择器

元素名称{......}

color: red;

font-size: 20px;

}

元素|标签可以给多个,不唯一
    根据标签名选择到一组或者一个元素

(3)id选择器

#id属性值{......}

#p1 {

font-weight: bold;

}

id,根据元素的id属性值选择到某个元素  唯一

(4)类选择器

.class属性值{......}

.hidden {

display: none;

}

类class:根据元素的class属性值选择到一个或者一组元素
    .+class属性的名字
    class属性值

(5)属性选择器

选取带有指定属性的元素

[属性名]{......}

[id=div3]{

color: green;

font-family: "微软雅黑";

}

2.组合选择器

(1)后代选择器(派生选择器)

用于选择指定标签元素下的后辈元素，以空格分隔

.food li {

border: 1px solid red;

}

(2)子元素选择器

用于选择指定标签元素的所有第一代子元素，以大于号分隔

.food > li {

border: 1px solid red;

}

(3)相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

#d + div {

border: 1px solid red;

}

(4)普通兄弟选择器

选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

li ~ li {

background-color : yellow;

}

三属性设置

1.背景

CSS 背景属性用于定义HTML元素的背景效果

(1)background-color

设置元素的背景颜色

body {background-color:#ff0000;}

(2)background-image

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body {background-image:url('paper.gif');}

(3)background-repeat

设置是否及如何重复背景图像

body {

background-image: url(../img/shanghai_lupu_bridge.jpg);

background-repeat: no-repeat;

}

2.文本

(1)color

设置文本的颜色

body {color:blue;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

(2)text-align

设置文本对齐方式，center（居中），left（左对齐），right（右对齐）

body {text-align:center;}

h1 {text-align:right;}

h2 {text-align:right;}

(3)text-decoration

规定添加到文本的修饰，属性值：none、underline、overline、line-through

1）underline

对文本添加下划线，与HTML的u元素相同。

h3 {text-decoration:underline;}

2）overline

对文本添加上划线。

3）line-through

对文本添加中划线，与HTML中的s和 strike 元素相同。

4）none

关闭原本应用到元素上的所有装饰。

(4)text-indent

设置文本首行缩进

p.ident2 {text-indent: 2em;}

3.字体

(1)font-family

文本字体，该属性设置文本的字体。

font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。

注意：

1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：

body {font-family: "arial black";}

2）多个字体系列是用一个逗号分隔指明

p{font-family: 微软雅黑,黑体,"agency fb";}

靠前的字体先生效

(2)font-size

文本大小

body {font-size: 50px;}/*字体大小50px*/

#span1 {font-size: 25px;}/*字体大小25px*/

(3)font-style

字体风格，该属性最常用于规定斜体文本。属性值：normal、italic、oblique

1）normal：文本正常显示；

2）italic：文本斜体显示；

说明：一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些属性，一些不常用字体可能只有正常体，若使用italic属性则没有效果，所以需要oblique属性强制倾斜

(4)font-weight

字体加粗，该属性设置文本的粗细。

bold：可以将文本设置为粗体。

100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。

100 对应最细的字体变形；

900 对应最粗的字体变形；

400 等价于 normal；

700 等价于 bold。

4.列表

(1)list-style

该属性按如下顺序设置列表样式：

list-style-type：列表项目标记样式。

list-style-position：列表项目标记位置

list-style-image：把图像设置为列表中的项目标记

{list-style:circle inside url()}

list-style-type

5.填充-盒子模型

能看见的内容的大小: 内容+内边距+外边距
背景的设置会自动延伸到内边距上

设置内外边距的时候:
1,2,4个值
border边框三要素: 宽度样式颜色;

display:设置元素的属性
    block
    inline
    inline-block 行内块
        拥有行内和块元素的特点,能设置宽高和同行显示

border、padding、margin三个属性构成了盒子模型。

(1)border

设置所有的边框属性。

1）可同时设置边框的宽度、样式、颜色

table, th, td { border: 1px solid black; }

table { width:100%; height:50px; }

2）使用border-width、border-style、border-color单独设置

table,td {

border-width: 1px;

border-style: dotted;

border-color: green;

}

3）border-collapse

设置是否将表格边框折叠为单一边框，属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）。

table { border-collapse : collapse; }

4）border-spacing设置分隔单元格边框的距离。

注意：

设置间距,border-collapse: separate;的状态下才有效。

table {border-spacing:10px;}

(2)padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性： td { padding:15px; }

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

默认按照上右下左的顺序设定

td .test1 {padding: 1.5cm}

td .test2 {padding: 0.5cm 2.5cm}

<tr>

这个表格单元的每个边拥有相等的内边距。

</td>

</tr>

</table>

<br />

<tr>

这个表格单元的上和下内边距是0.5cm，左和右内边距是 2.5cm。

</td>

</tr>

</table>

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

(3)margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {margin: 2px 4px 3px 4px;}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

p.margin{

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

}

*{margin: auto auto;}

*{margin: 100px auto;}

说明：

auto：自动，可以理解为居中的意思。浏览器自动计算外边距。

margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态，效果如下：

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距，效果如下：

6.对齐方式 text-align

它是针对于元素的内容

属性值

Left

center

right

p{text-align: center;} p是块元素，left、right和center会作用于整个行。

vertical-align

它相当于image标签里的align属性，是容器中元素相对于内容的显示

定义行内元素

示例

div{ background:orange; height: 100px;}

a {display:inline-block; height:50px; width:80px; background:red; vertical-align: middle;}

<div>这里有内容<a href="#"></a></div>

*div中定义a，vertical定义的是a相对于div内容的对齐方式，它和容器的高度无关，与文字内容有关

display

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。属性值

四定位和浮动

CSS 有三种基本的定位机制：普通流、浮动和绝对定位

除非专门指定，否则所有框都在普通流中定位，即普通流中的元素的位置由元素在HTML 中的位置决定

1.position （绝对定位）

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式

static :元素框正常生成。作为文档流的一部分（默认值）

relative :元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute :元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed :元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

static : 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

relative : 生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

absolute : 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed : 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }

</style>

2.float（浮动）

float的属性值有none、left、right。

只有横向浮动，并没有纵向浮动。
当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
会将元素的display属性变更为block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

何以所谓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day02 CSS

一使用样式注意：css声明要以分号;结束，声明以{}括起来建议一行书写一个属性若值为若干单词，则要给值加引号，如 font-family: "agency fb";如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的(学到js时就会有所了解)。css 层叠样式表行内样式表:元素上提供一个style属性,属性值中给样式 ...
复制链接

扫一扫