CSS_1

最新推荐文章于 2024-07-18 17:34:14 发布

重新开始的洛

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量443

点赞数

分类专栏： java入门学习文章标签： css html css3

本文链接：https://blog.csdn.net/qq_42915159/article/details/122867180

版权

学习同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

java入门

21 篇文章 0 订阅

订阅专栏

CSS

一.引言

1.1 什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二.CSS简介

2.1 基础语法

选择器{属性：值；属性：值；…}

注意事项

请使用花括号来包围声明
如果值为若干单词，则要给值加引号
多个声明之间使用分号;分开
css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

三.CSS导入方式

3.1 内嵌方式（内联）

把CSS样式嵌入到html标签当中，类似属性的用法

<div style="color:blue;font-size:50px">This is my HTML page. </div>

3.2 内部方式

在head标签中使用style标签引入css

<style type=“text/css”> //告诉浏览器使用css解析器去解析
	div{color:red;font-size:50px}
</style>

3.3 外部方式

将css样式抽成一个单独文件，使用者直接引用

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部
<link rel="stylesheet" type="text/css" href=“div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型，告诉浏览器使用css解析器去解析
href:css文件地址

四.CSS选择器

主要用于选择需要添加样式的html元素

4.1 基本选择器

4.1.1标签选择器

在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}

<style>
        p{
            color: red;
        }
</style>

4.1.2 id选择器

id选择器：给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明

id选择语法: #id值{属性:属性值}

id不可重复

<style>
	#one{
        color: orange;
    }
</style>

<p id="one" >id选择器1</p>

4.1.3 class选择器

class选择器：给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明

class选择器: .class名{属性:属性值}

class名可以重复

创建class选择器：
	<div class="s1">hello,everyone!</div>
	<div class="s2">hello,everyone!</div>
	<div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
<style type="text/css">
	.s1{color: purple;font-size: 100px}
	.s2{color: pink;font-size: 100px}
	.s3{color: yellow;font-size: 100px}
</style>

优先级问题 id选择器>class选择器>标签选择器

!important 这个属性可以把选择器的优先级提到最高

4.2 属性选择器

根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明

格式为： htm标签[属性=‘属性值’]{css属性:css属性值;}

html标签[属性]{css属性:css属性值;}

body内容：
	<form name="login" action="#" method="get">
	<font size="3">用户名：</font>
	<input type="text" name="username" value="zhangsan"><br>
	<font size="3">密码：</font>
	<input type="password" name="password" value="123456"><br/>
	<input type="submit" value="登录">
	</form>
head中书写：
<style type="text/css">
	input[type='text'] {
		background-color: pink;
	}
	input[type='password'] {
		background-color: yellow;
	}
	font[size] {
		color: green
	}
</style>

4.3 伪类选择器

主要是针对a标签
静止状态 a:link{css属性}
焦点状态 a:focus{css属性}（配合hover使用）
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}

代码：
	<a href="https://hao.360.cn/">点我吧</a>
样式：
<style type="text/css">
	<!--静止状态 -->
	a:link {color: red;}
	<!--悬浮状态 -->’
	a:hover {color: green;}
    <!--悬停状态-->
    a:focus{}
    a:hover {color: black;}
	<!--触发状态 -->
	a:active {color: yellow;}
	<!--完成状态 -->
	a:visited {color: blue;}
</style>

五.CSS属性

5.1 文字属性

font-size 数值设置字体大小

font-family 默认、宋体、楷体等设置字体样式

font-style normal正常；italic 斜体设置斜体样式

font-weight 100-900 设置粗体样式

5.2 文本属性

color 十六进制;表示颜色的英文单词; 设置文本颜色

text-indent 5px缩进5像素;20%缩进父容器宽度的百分之二十; 缩进元素中文本的首行

text-decoration none;underline;overline;blink; 文本的装饰线

text-align left;right;center 文本水平对齐方式

word-spacing normal;固定值; 单词之间的间隔

line-height normal;固定值; 设置文本的行高

text-shadow 四个取值依次是：水平偏移;垂直偏移;模糊值;阴影颜色；设置阴影及模糊效果

5.3 背景属性

background-color 16进制; 用于表示颜色的英语单词; 设置背景色

background-image url(‘图片路径’) 设置背景图片

background-repeat repeat-y;repeat-x;repeat;no-repeat; 设置背景图的平铺方向

background-position top;bottom;left;right ; center; 改变图像在背景中的位置

5.4 列表属性

list-style-type disc等改变列表的标识类型

list-style-image url(“图片地址”) 用图像表示标识

list-style-position inside;outside 标识出现在列表项内容之外还是内部

5.5 尺寸属性

width:设置元素的宽度

height:设置元素的高度

5.6 显示属性

显示属性display ，以下是常用取值：

none:不显示
block:块级显示
inline:行级显示

5.7轮廓属性

outline-style solid(实线)/dotted(虚线)/dashed(虚线)等设置轮廓的样式

outline-color 16进制; 用于表示颜色的英文设置轮廓的颜色

outline-width 数值设置轮廓的宽度

5.8 定位属性

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

<head>
<style type="text/css">
	h2.pos_left {
		position: relative;
		left: -20px
	}
	h2.pos_right {
		position: relative;
		left: 20px
	}
</style>
</head>
<body>
	<h2>这是位于正常位置的标题</h2>
	<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
	<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
	<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
	<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
	<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

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

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
	h2.pos_abs {
		position: absolute;
		left: 100px;
		top: 150px
	}
</style>
</head>
<body>
	<h2 class="pos_abs">这是带有绝对定位的标题</h2>
	<p>
        通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部150px。
    </p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
	#left {
		width: 200px;
		height: 200px;
		background-color: red;
		position: fixed;
		left: 0px;
		bottom: 0px;
	}
	#right {
		width: 200px;
		height: 200px;
		background-color: green;
		position: fixed;
		right: 0px;
		bottom: 0px;
	}
	#middle{
		width: 200px;
		height: 200px;
		background-color: blue;
		position: fixed;
		left: 0px;
		bottom: 50%;
	}
</style>
</head>
<body>
	<div id="left">左下</div>
	<div id="right">右下</div>
	<div id="middle">中间</div>
</body>
</html>

后面还有一个css_2
呜呜呜~~

重新开始的洛

关注

0
点赞
踩
0

收藏

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

CSS一.引言1.1 什么是CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。二.CSS简介2.1 基础语法选择器{属性：值；属性：值；…}注意事项请使用花括号来包围声明如果值为若干单词，则要给值加引号多个声明之间使用分号;分开css对大小不敏感，如果
复制链接

扫一扫