JavaWeb学习笔记(1)__CSS篇

程序员文章站 2022-06-11 15:53:56

...

2.CSS篇

目录结构

2.CSS篇

第一章 CSS概述
第二章 CSS选择器
第三章字体段落属性

1.文本的普通样式
2.文本的高级样式
3.段落属性

第四章美化表格表单

1.表格样式
2.表单样式
3.图片样式

第五章美化背景和边框

1.背景样式
2.边框样式

第一章 CSS概述

css基本语法：选择符(selector)，属性(property)，属性值(value)

selector{property:value}

段落样式

<!--行内样式-->
<p style="color:red;font-size:20px">行内样式</p>

<!--内嵌样式-->
<head>
	<style type="text/css">
        p{
            color:red;
            font-size:12px;
        }
    </style>
</head>

<!--链接样式--> 最常用
<link rel="stylesheet" type="text/css" href="1.css"/>
rel表示链接到样式表，其值为stylesheet
type表示样式表为css样式表
href表示文件路径

<!--导入样式-->
<head>
    <style>
    	@import "1.css"
    </style>
</head>

优先级问题：如果同一个元素被多种段落样式修饰,则：行内样式 > 内嵌 > 链接 > 导入样式

第二章 CSS选择器

标记选择器

<style>
    p
    {
        color:red;
        font-size:12px;
	}
</style>

类选择器

前面有一个.

<style>
    .aa
    {
        color:red;
        font-size:12px;
	}
</style>
<body>
    <p class="aa">
        一段随便写的文字
    </p>
</body>

id选择器

前面有一个#

<style>
    #abc
    {
        color:red;
        font-size:12px;
	}
</style>
<body>
    <p id="abc">
        一段随便写的文字
    </p>
</body>

一个id只能赋予一个HTML标记，因为JS等脚本语言也可是使用ID，如果HTML中有两个相同的ID，那么JS在查找ID时会出现错误。ID选择器比类选择器具有更高的优先级。

全局选择器

只有一个*，对所有标记起作用

<style>
   *
    {
        color:red;
        font-size:12px;
	}
</style>

组合选择器

组合选择器只是一种组合形式，并不是一个真正的选择器，一般将标记选择器和类选择器组合或将标记选择器和ID选择器组合使用，格式：浏览器标记.类标记/Id标记 {...}

<style>
    <!--p标签中id为abc的属性-->
    p.abc
    {
        color:red;
        font-size:12px;
	}
</style>
<body>
    <p id="abc">
        一段随便写的文字
    </p>
</body>

继承选择器

规则：子标签在没有定义的情况下所有的内容都是继承父标签的，子标签重新定义后(与父标签冲突的地方)显示新的内容，不冲突的地方显示父标签的内容

<style>
    <!--test类下面span标记下的img中的属性-->
    .test span img 
    {
        border:1px;
        blue solid;
	}
</style>
<body>
    <div class="test">
        <span><img src="1.png"/></span>
    </div>
</body>

伪类选择器

用伪类定义的CSS样式并不是作用在标记上，而是作用在标记的状态上，由于多数浏览器支持不同的伪类，且没有统一打标准，所以部分伪类选择器不经常使用。经常使用的有 :link :vistited :hover :active

常用在标记<a>中，表示链接的四种状态伪类选择器前面有一个：

JavaWeb学习笔记(1)__CSS篇

属性选择器

结构伪类选择器

UI元素状态伪类选择器

以上三种不经常使用，故不再赘述

选择器声明

集体声明

h1,h2,p
{
	color:red;
	font-size:12px;
}
<!--h1,h2,p的风格让他们都相同-->

多重嵌套声明

<style>
    p a
    {
       color:red;
		font-size:12px; 
	}
</style>
<body>
    <p>
        <a>多重嵌套</a>
    </p>
</body>
<!--使p标签下的a标签具有此种样式-->

第三章字体段落属性

1.文本的普通样式

1.1 字体 font-family

font-family预设多找字体的功能，如果前面的字体不能正确显示，则系统自动选择后面的一种字体,最好以最基本的字体类型作为最后一个。

如果字体类型中含空格，应用” “（例:Times New Roman）

1.2 字号 font-size

可用参数：数值px（18px）百分比（50%）

medium默认值，xx-small最小，x-small 较小，small小

xx-large最大 x-large较大 large最大

1.3 字体风格 font-style

可用参数：normal 正常(默认值)，italic 斜体，oblique 倾斜，inherit继承自父元素

1.4 字体加粗 font-weight

可选参数：bold 粗体，noraml 正常(默认)

1.5 小写字母转大写 font-variant

noraml：正常(默认)，small-caps 小转大

1.6 字体复合属性

font属性可以一次性地使用多个属性值定义文本字体

{font:font-style font-variant font-weight font-size font-family}

按照上面的排序使用，其中 font-style font-variant font-weight 属性之间可以*调换,font-size font-family 必须按固定的顺序出现

1.7 字体颜色 color

可用: 颜色的英文 red ，十六进制 #ff0000，RGB代码 rgb(255,0,0)

p
{
	font-family:楷体 宋体 黑体 华文行楷 "Times New Roman" 
    font-size:18px
    font-style:italic
    font-weight:bold
    color:red
}

2.文本的高级样式

2.1 文本阴影 text-shadow

text-shadow: length length opacity color

有四个属性值：

length 水平位移（可取正负值）

length 阴影垂直位移（可取正负值）

opacity 模糊半径（可选，正值）

color 阴影颜色值（可选）

<p style="text-shadow:0.1em 2px 6px blue"></p>

2.2 溢出文本 text-overflow

当输入的文本值超过文本框时，定义多余文本的省略方式

可选值：
clip：简单的裁剪

ellipsis：显示省略标记…

2.3 换行控制 word-wrap

当在指定区域显示的文字一行显示不完时，需要换行

可选值：
normal：允许内容顶开指定的边界

break-word：边界内换行

p
{
	text-shadow:0.1em 2px 6px blue
	text-overflow:ellipsis
	word-wrap:break-word
}

3.段落属性

3.1 单词间隔 word-spacing

适用于英语单词之间的间隔（不适用于英文每个字母，不适用于文字）

可选值：normal 默认，数字 15px 可正负

3.2 字符间隔 letter-spacing

适用于英文每个字母之间，适用于文字

可选值：normal 默认，数字 15px 可正负

3.3 文字修饰 text-decoration

none 不修饰，underline 下划线，overline 上划线，line-through 删除线，blink 闪烁(只有少数浏览器支持)

3.4 文本转换 text-transform

none 不转换，uppercase 转化成大写，lowercase 转换成小写

3.5 水平对齐 text-align

strat 向行的开始边缘对齐，end 向行的结束边缘对齐

left 左对齐，right 右对齐，center 居中对齐

3.6 文本缩进 text-indent

length的属性值由百分比数字或浮点数字和 "单位标识符"组成

style=“text-index: 10mm (或 10%)" 缩进10毫米，或10%

3.7 文本行高 line-height

行间距，normal 默认，length的属性值由百分比数字或浮点数字和 "单位标识符"组成，允许为负值

3.8 文本反排 unicode-bidi 和 direction

直接上代码，固定的使用方式

p{
		direction:rtl;
		unicode-bidi: bidi-override;
        
    }

JavaWeb学习笔记(1)__CSS篇

第四章美化表格表单

1.表格样式

table{
	border: 1px double #cad9ea;
	/*表格边框：1像素，style 颜色
	  style:dotted 点状，solid 实线， double 虚线， dashed 双线*/
	
	border-collapse: separate|collapse;
    /*设置表格是否被合成为一个单一的边框（使表格的边框简化）
    separate默认值，边框会被分开；collapse 合并成一个单一的边框*/
    
    border-width:6px;/*设置表格边框宽度*/
    border-style:double;/*设置表格边框样式,虚线*/
    border-color:yellow;/*设置表格边框颜色*/
    /*以上三个等价于*/ border:6px double yellow;
    
    color:black;/*设置表格内文本颜色*/
    background-color:blue;/*设置表格背景色（用id/类标签可设置某个单元格颜色）*/   
}

2.表单样式

主要是通过input控件来修改

input{
	background-color:#ADD8E6;/*设置背景色*/
    border:1px solid #cad9ea;/*设置边框属性*/
    padding:1px 2px 1px 2px;/*设置内边距,可设置1~4个值*/
}

案例：优化输入框和提交按钮

将背景色设置为 transparent 透明色

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS测试</title>
<styele type="text/css">
h1{
	font-size: 16px;
	text-align: center;
}

#onetext{
	border-bottom: 1px solid #005aa7;//设置边框底部
	border-top: 0px;//清楚边框的上右左
	border-left: 0px;
	border-right: 0px;
	color: #005aa7;//设置文本颜色
	background-color: transparent;//设置背景颜色为透明色
}

#onebutton{
	border: 0px;//清楚所有的边框
	background-color: transparent;//设置背景颜色为透明色
    /*
    border-top-left-radius: 6px;//设置按钮四个角为弧形 6px为调整强度
    border-top-right-radius: 6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    //上面四条可以合并为：border-radius:6px;
    */
}

</style>
</head>

<body>
	<h1>签名页面</h1>
	<form>
		<input type="text" id="onetext">
		<input type="button" value="提交" id="onebutton">
	</form>
</body>
</html>

JavaWeb学习笔记(1)__CSS篇

案例：隔行变色的表格

<!doctype html>
<html>
<!---->
<head>
	<meta charset="utf-8">
	<title>CSS测试</title>
	<link rel="stylesheet" type="text/css" href="玩一下.css">
</head>

<body>
	<h1>一个优雅的表格</h1>
	<table border="1"> 
		<tr>
			<th>编号</th><th>姓名</th><th>成绩</th>
		</tr>
		<tr>
			<td>001</td><td>小A</td><td>500</td>
		</tr>
		<tr>
			<td>002</td><td>小B</td><td>520</td>
		</tr>
		<tr>
			<td>003</td><td>小C</td><td>530</td>
		</tr>
		<tr>
			<td>004</td><td>小D</td><td>510</td>
		</tr>
		<tr>
			<td>005</td><td>小E</td><td>550</td>
		</tr>
		<tr>
			<td>006</td><td>小F</td><td>590</td>
		</tr>

	</table>
</body>
</html>


h1{
	font-size: 16px;
	text-align: center;
}
table{
	text-align: center; /*表格内字体居中方式*/
	width: 80%; /*用百分比，表格整体在网页中占比*/
	font-size: 12px;
	table-layout: fixed;
	/*表格的布局仅用于表格的宽度,表格边框的宽度,
	单元格间距,列的宽度,与表格内容无关*/
	empty-cells: show;
	/*是否显示空单元格（show显示,hidden隐藏）*/
	border-collapse: collapse;/*边框合并*/
	margin:0 auto;/*简写属性在一个声明中设置所有外边距属性*/
	border: 1px double #cad9ea;
	/*表格边框：1像素，style 颜色
	  style:dotted 点状，solid 实线， double 虚线， dashed 双线;
	*/
	color: black;/*字体颜色*/
}
th{
	height: 30px;
	overflow: hidden;/*属性规定当内容溢出元素框时发生的事情*/

}
td{
	height: 20px;
}
th,td{
	border: 1px solid #cad9ea;
	padding: 0 1em 0;
	/*边框内间距 上0 左右1em 下0*/
}
/*:nth-child()规定属于其父元素的第二个子元素的每个 p 的背景色*/
tr:nth-child(even){
	background: #f5fafa;
}

JavaWeb学习笔记(1)__CSS篇

3.图片样式

3.1边框风格 bordy-style

可选值：（点线式边框）dotted，（破折线式边框）dashed，（直线式边框）solid，（双线式边框）double，（内嵌效果的边框）inset，（凸起效果的边框）outset

如果需要对四个边做详细设计，那么可以使用：border-top-style；border-right-style；border-left-style；border-right-style

3.2 图片缩放

width：和 height: 单位是数值或百分比

max-width 和 max-height 设置图片宽度的最大值和最小值，如果当前引入的图片超过了定义的大小，则以 max-width 和 max-height 显示

3.3 对齐方式

3.3.1 横向对齐

img图片本身没有对齐属性，需要标记父标签的对齐方式（text-align），让图片继承父标记。text-align 可选值：left , right , center

<p style="text-align:center">
    <img src="1.jpg">
</p>

3.3.2 纵向对齐

vertical-align: JavaWeb学习笔记(1)__CSS篇

3.4 图文并排

3.4.1 文字环绕

float: none(不环绕)| left(文字左环绕) | right(文字右环绕)

3.4.2 设置图片与文字的间距

padding: 主要用来在一个声明中设置所有的内边距属性

也可以划分为具体的四个边的值； padding-top:10px;

Q：网页在进行排版时，应该做些什么？

(1) 首行缩进 text-indent:2em

(2) 图文混排 flost:

(3) 设置背景色 background:

(4) 文字居中 text-align:center

(5) 显示边框 border

第五章美化背景和边框

1.背景样式

1.1 背景颜色

前景色：color

背景色：background-color: tranaparent(透明色)|color

放在body中，设置整个页面的背景色，亦可设置其他例h1的背景色

1.2 背景图片

background-image:url(1.jpg)

放在中，定义整个网页的背景

最好同时设置背景色,当背景图片无法显示时将显示背景色，图片正常显示时，将覆盖背景色

1.3 背景图片重叠

background-repeat: no-repeat(不重叠,常用)|repeat(水平和垂直方向重复平铺)|repeat-x（水平方向）|repeat-y（垂直方向）

1.4 背景图片显示

如果图片不能覆盖整个页面，是否将图片设置为随着页面往下滑而滚动

background-attachment: scroll （默认,一起滚动）| fixed (固定在当前窗口)

1.5 背景图片的位置

background-position：绝对定义位置(length) | 百分比定义位置(percentage) | 垂直对齐(top，center，bottom) | 水平对齐(left，center，right)

其中垂直对齐可以和水平对齐一起使用：background-position: top right;

1.6 背景图片大小

background-size：length(浮点数+单位) | 百分比

cover：(常用) 保持背景图像本身的宽高比例，将图片缩放直到完全覆盖所定义的背景区域

contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度完全适应所定义的背景区域

1.7 不太了解的属性

这些属性不太清楚干啥的，暂且先记下来，后面用到再做补充

1.背景显示区域 background-origin: border|padding|content

2.背景图像裁剪区域 background-clip: bprder-box|padding-box | content-box | no-clip

1.8 背景复合属性

background: [color] [image] [repet] [attachment] [position] [size] [clip] [origin]

其中属性可以*调换并且可以选择设定，没有设定的属性自动添加默认值

2.边框样式

2.1 边框样式

border-style: （点线式边框）dotted，（破折线式边框）dashed，（直线式边框）solid，（双线式边框）double，（内嵌效果的边框）inset，（凸起效果的边框）outset

border-color: color

border-width: 边框宽度

以上三个属性均可具体到四个方向，例如： border-top-width:

2.2 边框复合属性

border: width style color

三个属性顺序可以*调换

2.3 圆角边框

border-radius: none | length= 浮点数 + 单位

一个参数：圆角的半径 border-radius: 10px ;

两个参数：圆角的水平半径 / 圆角的垂直半径（两个参数之间用 “/” 分割）border-radius: 5px/50px

延伸属性：

border-top-right-radius: border-bottom-right-radius:

border-bottom-left-radius: border-top-right-radius:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS测试</title>
	<style>
	.div{
		border: 5px red solid;
		height: 100px;
		border-top-left-radius: 70px;
		border-bottom-right-radius: 40px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}	
	</style>
</style>

</head>

<body>
	<div class="div"></div><br>
</body>
</html>

JavaWeb学习笔记(1)__CSS篇

作者：耿鬼不会笑

JavaWeb学习笔记(1)__CSS篇

2.CSS篇

目录结构

第一章 CSS概述

段落样式

第二章 CSS选择器

标记选择器

类选择器

id选择器

全局选择器

组合选择器

继承选择器

伪类选择器

属性选择器

结构伪类选择器

UI元素状态伪类选择器

选择器声明

集体声明

多重嵌套声明

第三章 字体段落属性

1.文本的普通样式

1.1 字体 font-family

1.2 字号 font-size

1.3 字体风格 font-style

1.4 字体加粗 font-weight

1.5 小写字母转大写 font-variant

1.6 字体复合属性

1.7 字体颜色 color

2.文本的高级样式

2.1 文本阴影 text-shadow

2.2 溢出文本 text-overflow

2.3 换行控制 word-wrap

3.段落属性

3.1 单词间隔 word-spacing

3.2 字符间隔 letter-spacing

3.3 文字修饰 text-decoration

3.4 文本转换 text-transform

3.5 水平对齐 text-align

3.6 文本缩进 text-indent

3.7 文本行高 line-height

3.8 文本反排 unicode-bidi 和 direction

第四章 美化表格表单

1.表格样式

2.表单样式

3.图片样式

3.1边框风格 bordy-style

3.2 图片缩放

3.3 对齐方式

3.3.1 横向对齐

3.3.2 纵向对齐

3.4 图文并排

3.4.1 文字环绕

3.4.2 设置图片与文字的间距

Q：网页在进行排版时，应该做些什么？

第五章 美化背景和边框

1.背景样式

1.1 背景颜色

1.2 背景图片

1.3 背景图片重叠

1.4 背景图片显示

1.5 背景图片的位置

1.6 背景图片大小

1.7 不太了解的属性

1.8 背景复合属性

2.边框样式

2.1 边框样式

2.2 边框复合属性

2.3 圆角边框

ARM汇编指令集_学习笔记（1）

MVC项目结构搭建及单个类的实现学习笔记1

Flask框架学习笔记（一）安装篇（windows安装与centos安装）

python网络爬虫学习笔记（1）

html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

java学习之路_篇超好的文章第1/3页

oracle学习笔记day1

学习WEB标准总结的一些CSS/XHTML知识小结第1/3页

javaweb学习讲解之CSS_文本外观

CSS3中的Media Queries学习笔记

第三章字体段落属性

第四章美化表格表单

第五章美化背景和边框