JavaWeb学习笔记(2)__CSS篇

最新推荐文章于 2021-09-10 07:19:42 发布

耿鬼不会笑

最新推荐文章于 2021-09-10 07:19:42 发布

阅读量479

点赞数

分类专栏： # JavaWeb开发基础文章标签： html css css3 html5

本文链接：https://blog.csdn.net/A233666/article/details/104929930

版权

JavaWeb开发基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

2.CSS篇

目录结构

- 2.CSS篇

第一章 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>中，表示链接的四种状态伪类选择器前面有一个：

属性选择器

结构伪类选择器

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;
        
    }

第四章美化表格表单

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>

案例：隔行变色的表格

<!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;
}

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:

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>