课堂笔记-CSS基础2

最新推荐文章于 2024-07-25 16:45:46 发布

冷冷的O_o

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/qq_51267159/article/details/123975090

版权

代码学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文字常用属性

CSS对元素的样式控制主要通过各种属性来实现，其中字体属性主要控制文字的字体信息：

font-family属性设置字体类型
font-size属性设置字体大小
font-weight属性设置字体粗细，例如粗体bold，或者数值如900
font-style属性设置字体风格，例如斜体

文本属性可以对文本设置各种装饰

text-align属性设置文字对齐方式，例如左对齐left
word-spacing属性设置单词之间的间距
letter-spacing属性设置字母之间的间距
text-decoration属性设置文字修饰，例如，下划线underline
text-transform属性设置问题转换，例如，文字全部大写uppercase
text-shadow属性设置文本的阴影

背景属性

CSS中背景设置主要分为背景颜色和背景图像

使用background-color属性为元素设置背景色，可以直接写颜色字符串也可以写RGB值#rrggbbaa

要把图像放入背景，需要使用background-image属性
例如：background-image:url(img/fivestar.jpg);

设置背景图像的起始位置需要使用background-position属性进行设置
例如：background-position:0px 0px;

background-repeat 属性的属性值如果是 repeat，则会将背景图像在水平和垂直方向上都平铺
如果值是repeat-x 和 repeat-y 则将分别使图像只在水平或垂直方向上进行重复
如果值是no-repeat 则不允许图像在任何方向上进行平铺
默认地，背景图像将从一个元素的左上角开始

background-clip属性是CSS3的属性，主要用于背景图像或者颜色的裁剪区域
基本语法格式是：

background-clip : border-box | padding-box | content-box;

border-box是默认值，表示从边框区域向外裁剪背景（背景覆盖一直到边框位置）
padding-box表示从内边距区域向外裁剪背景（背景覆盖包含padding部分）
content-box表示从内容区域向外裁剪背景（背景覆盖仅包含内容部分）

线性渐变：为了创建一个线性渐变，必须至少定义两种颜色结点，也可以设置一个起点和一个方向（或一个角度），其定义的基本语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中direction指明线性渐变的方向，默认是从上到下

重复的径向渐变语法为：

background: repeating-radial-gradient(shape, start-color, ..., last-color);

其中shape参数定义形状，其值可以是circle(圆形)或ellipse（椭圆形/默认值）

举个栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景渐变</title>
<style> 
div{
	width:100px;
	height:100px;
	border-radius:50%;
}
#box1 {
	background:linear-gradient(45deg,#f00 30%,#ff0 60%);
}
#box2 {
	width:100px;
	height:100px;
	border-radius:50%;
	background:repeating-radial-gradient(circle at 50% 50%,red,yellow 10%,blue 15%);
}
</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>

列表属性

在CSS中，列表属性是设置无序列表标记（<ul></ul>）的呈现形式，常用的列表属性有：

list-style-type属性用于设置列表项标记的类型，这个类型主要有：disp、circle、square、none

list-style-image属性用于设置使用什么图像来作为列表符号

list-style-position属性用来指定列表符号显示的位置

盒子模型

CSS盒子模型是CSS样式设置的基础；
盒子模型认为任何HTML元素都是一个矩形的洋葱，由很多层组成，从内到外依次为：

内容 content
内边距 padding
内边距是指盒子模型的边框与显示内容之间的距离，使用padding属性进行定义，语法格式如下：

padding：上下左右边距值;
padding：上下边距值, 左右边距值;
padding：上边距值, 左右边距值, 下边距值;
padding：上边距值, 右边距值, 下边距值, 左边距值;

边框 border
元素的边框（border）是围绕元素内容和内边距的一条或多条线；
CSS中使用border属性设置元素边框的样式、宽度和颜色。
边框线定义方式如下：

border: 宽度 样式 颜色;

此外，CSS3中边框还可以通过设置border-radius属性为元素增加圆角边框，该属性定义的语法如下：

border-radius : 像素值|百分比

外边距 margin
外边距是指边框到另外一个元素之间的距离，其作用是把一个元素撑大，使用margin属性可以定义元素的外边距，其语法如下：

margin：像素值;
margin：像素值, 像素值;
margin：像素值, 像素值, 像素值;
margin：像素值, 像素值, 像素值, 像素值;

轮廓 outline

伪类和伪元素

伪类是一种特殊的类选择符，是能够被支持CSS的浏览器自动识别的特殊选择符，最大的用途是为超级链接定义不同状态下的样式效果。
伪类的语法是在原有的选择符后加一个伪类，其语法格式如下所示：

选择器:伪类｛
　　属性：属性值；
　　属性：属性值；
　　……
｝

常用的伪类如下：
表示状态：link, visited, hover, active
a:hover 必须在 a:link 和 a:visited 之后，a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果；
结构化伪类：last-child
表单相关伪类：focus

举个栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>伪类</title> 
<style>
a:link {					/* 未访问链接*/
	color:#000000;		 	
	}    
a:visited {					/* 已访问链接 */
	color:#00FF00;			
	}  
a:hover {					/* 鼠标移动到链接上 */
	color:#FF00FF;			
	}  	
a:active {					/* 鼠标点击时 */
	color:#0000FF;
	}  
input:focus					/*input标记获得焦点时*/
{
	background-color:yellow;
}
p:last-child				/*P标记的最后一个标记*/
{
	font-size:24px;
} 
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
First name: <input type="text" name="fname" /><br>
<p>This is some text.</p>
<p>This is some text.</p>
</body>
</html>

CSS的伪元素不是真正的页面元素，即没有对应的HTML元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用例如页面元素一样的CSS样式，表面上看上去貌似是页面的某些元素来展现，实际上是CSS样式展现的行为，因此被称为伪元素。
常用的伪元素如下所示：

before：在某个元素之前插入一些内容；
after：在某个元素之后插入一些内容；
first-letter：为某个元素中的文字的首字母或第一个字使用样式；
first-line：为某个元素的第一行文字使用样式；
selection：匹配用户被用户选中或者处于高亮状态的部分；
placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效

举个栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>伪元素</title> 
<style>
p.fl:first-line 
{
	color:#ff00ff;
	font-size:24px;
}
p.myClass:first-letter{
	color:#ff0000;
	font-size:xx-large;
}
p.youClass:before{
	 content: "Hello,"
}
p.youClass:after{
	content: "Welcome!"
}
</style>
</head>
<body>
<p class="fl">向文本的首行设置特殊样式<br/>可以使用 "first-line" 伪元素。</p>
<p class="myClass">可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>
<p class="youClass"> World!</p>
</body>
</html>

块元素和行内元素

块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性。
一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。
行内元素与块元素可以通过display属性进行相互交换，display属性常用的属性值如下：

inline：此元素将显示为行内元素（行内元素默认的 display属性值）
block：此元素将显示为块元素（块元素默认的 display属性值）
inline-block：此元素将显示为行内块元素，可以对其设置宽度、高度和对齐等属性，但是该元素不会独占一行
none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块元素与行内元素</title>
<style>
  p{ background-color:pink;}
  span{ background-color:yellow; display:block;}
  i{ background-color:#CFF;}
  div{ background-color:#FFC; display:inline;}
</style>
</head>
<body>
  <p>p标记——块元素</p>
  <span>span标记——行内元素</span>
  <i>i标记——行内元素</i>
  <div >div标记——块元素</div>
</body>
</html>

溢出

在盒子模型中的代表块元素的矩形对象，可以通过CSS样式来定义内容区域的高度与宽度，当这个内容无法容纳子矩形对象时，对于这些子矩形对象必须决定怎么显示，显示什么，这样的处理规则就称为溢出处理。
CSS溢出定义方法：

overflow：visible｜hidden｜scroll｜auto

visible表示溢出的部分依然可见
hidden表示溢出的部分不可见
scroll表示溢出的部分显示滚动条
auto表示自动设置

可见性

一个元素是否在网页中被用户看见，可以通过两个属性进行设置：

visibility：
visibility属性设置隐藏，但隐藏后其原来位置仍然被占用。
该属性的语法格式如下所示：

visibility: visible | hidden  ;

display：
当元素的display属性被设置为none时，元素被隐藏，并且元素所占的位置能被其他元素占用。

冷冷的O_o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课堂笔记-CSS基础2

文字常用属性CSS对元素的样式控制主要通过各种属性来实现，其中字体属性主要控制文字的字体信息：font-family属性设置字体类型font-size属性设置字体大小font-weight属性设置字体粗细，例如粗体bold，或者数值如900font-style属性设置字体风格，例如斜体文本属性可以对文本设置各种装饰text-align属性设置文字对齐方式，例如左对齐leftword-spacing属性设置单词之间的间距letter-spacing属性设置字母之间的间距text-deco
复制链接

扫一扫