CSS学习

最新推荐文章于 2024-09-23 15:32:37 发布

原创最新推荐文章于 2024-09-23 15:32:37 发布 · 206 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#安全

基础学习专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了CSS的基本概念、语法、选择器类型，包括类选择器、ID选择器、标签选择器等，并展示了如何通过CSS进行网页布局、文字样式、背景设置、链接样式和表单元素的定制。此外，还探讨了响应式布局和定位技术，以及在实际网页设计中的应用案例。

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
【div是布局，css是显示】

特点：

丰富了样式定义；
易于修改和使用
多页面应用
页面压缩

二、CSS语法

1、/* ------*/为注释
2、CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
3、优先级：
外部<内部<内嵌
标签选择器<类选择器<ID选择器

布局主要样式：

font ------------字体
【
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
】

margin --------外边距设置

text ----------- 文本
【
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
】

padding -----内边距

background —背景
【
background-color: red;
background-image: ----插入图片
background-repeat: repeat; 背景平铺
background-position: center left; 定义背景位置
background-attachment: scroll /fixed 定义背景图像(滚动/固定）
background:rgba(0,0,0,.3)半透明
用法：
background:颜色图片地址url( .jpg) 背景平铺滚动图片位置
】

dispaly------对象

border-------边框
【
border-width: 1px; /定义边框粗细/
border-style: solid; /定义边框样式/
border-color: red; /定义边框颜色/
border-collapse: collapse;* /定义表格边框合并/
/*border-top: 1px dotted green; / /定义上边框参数，同理左右下也可以/
padding: 10px;
padding:0; / 清除内边距 /
margin:0; / 清除外边距 */
】

hover-------伪类选择符
float--------位置浮动

三、类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

单类选择器：

<head>
	<meta charset="utf-8">
	<title></title>
	
<style type="text/css">
   .center{
	text-align:center;
    }

</style>
</head>

<body>
<h1 class="center">标题居中</h1>
</body>

多类选择器：

<style type="text/css">
		.zxc {
			color: red;
			background-color: green;
		}
		.x {
			font-size: 30px;
		}
	</style>

四、ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
``HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

五、标签选择器

<style type="text/css">
		b {
			color: red;
			font-size: 33px;
		}
	</style> -->

六、通配符选择器

<style type="text/css">
		* {
			color: red;
		}
	</style>

七、后代选择器

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>

<body>
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

八、子选择器

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
</body>
</html>

【受益的只有第一个< h1>标签内的】

九、选择器分组与嵌套

可以将任意多个选择器分组在一起，对此没有任何限制。

body, h2, p, table, th, td, pre, strong, em {color:gray;}

声明分组

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

【在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。】

嵌套

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式

十、链接

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

【
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的；
伪类名称对大小写不敏感。
】

<style>
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/css/" target="_blank">这是一个链接</a>

十一、列表

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

ul
{
    list-style-image: url('sqpurple.gif');
}

所有的CSS列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

十二、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明。
【
margin:100px 50px;
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
】

Border(边框) - 围绕在内边距和内容外的边。

边框样式：
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;

轮廓

outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度

Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

十三、填充

padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

padding:25px 50px 75px 100px;

十四、定位

position 属性指定了元素的定位类型。

position 属性的五个值：
static
relative----------相对于正常的位置
fixed-----------相对与浏览器的位置是固定的
absolute---------绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>
sticky--------粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

十五、网页布局

头部

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

菜单

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

响应式页面布局

* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

十六、表单

</head>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>