css总结

1. 网页样式
2 .网页基础样式添加
3.网页布局
- 3.1DIV进阶（盒子模型）
- 3.2给页面元素添加盒子
4.网页排版

1. 网页样式

1.1 引入方法

1.1.1内联样式

<标记名 style="样式属性：样式属性值；样式属性：样式属性值；·······">

 "font-size:20px; line-height:30px; text-align:center: ">设置想要输入的文本

1.1.2内部样式表

 <style type = "text/csS">
选择符1{样式属性：样式属性值;样式属性：样式属性值…}
选择符2{样式属性：样式属性值；样式属性：样式属性值;…}
选择符3{样式属性：样式属性值；样式属性：样式属性值;⋯}
style>

 在<head>中引入<style>

1.1.3链接外部样式

rel=“styesheet”用来定义链接的文件与html之间的关系
styesheet值表示指定一个固定或者首选的样式
type="text/css"指文件的类型是样式表文本

href="style.css"文件所在的位置

 <head>
    <link href="style.css" rel="stylesheet" type="text/css"

1.1.4导入外部样式

导入外部样式使用import方法，常用如下

@ import ulr("样式路径")；
@ import ulr(样式路径)；
@ import "样式路径"；
@ import ‘样式路径’；

1.2 基础语法

1.3 选择器的分类

1.3.1标记选择器

css

 <style>
h1{
color:"red"
}

html

 <h1>标签选择器使用h1>

1.3.2通用选择器

对所有元素都生效
符号表示

 *{
margin: 0;
padding: 0;
}

1.3.3 i d选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 "#" 来定义。
id名称是唯一的，只能对应于文档中一个具体的元素

 <html>
<head>
<meta charset="utf-8"> 
<title>id选择器title> 
<style>
#para1{
	text-align:center;
	color:red;
} 
style>
head>
 
<body>
<p id="para1">id选择的部分p>
<p>这个段落不受该样式的影响。p>
body>
html>

1.3.4类选择器

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

所有的 p 元素使用 class="center" 让该元素的文本居中:

 <style>
p.center{
	text-align:center;
}
style>
<body>
<h1 class="center">这个标题不受影响h1>
<p class="center">这个段落居中对齐。p> 
body>

2.多个 class 选择器可以使用空格分开

 <style>
.center {
	text-align:center;
}
.color {
	color:#ff0000;
}
style>
 
<body>
<h1 class="center">标题居中h1>
<p class="center color">段落居中，颜色为红色。p> 
body>

1.3.5属性选择器

/* 用属性名字来选择元素 */
	[title]{
	color: red;

  
    <style>
        /* 用属性名字来选择元素 */
        [title]{
            color: red;
        }
        a[title]{
            color: green;
        }
 
        a[title][href]{
            color: black;
        }
    style>
 
<body>
    <h1>这是一个标题h1>
    <h2 title="computer class one">hello wordh2>
    <a href="http://www.baidu.com" title="baidu">百度用一下a><br>
    <a href="http://www.12306.com">12306a>

2.属性值选择器

/* 用属性值来选择元素 */
	`a [href="http://www.baidu.com"][title="baidu"]{`
	color: red;
	}

1.3.6后代选择器

E1 E2{属性1：属性值1;....}

 <style type="text/css">
  ul a{
  color:red；
  }
style>

 <body>
     <ul>html:<a href="网址地址">htmla>li>
     <ul>css:<a href="网址地址">cssa>li>
     <ul>javaScript:<a href="网址地址">javaScripta>li>
     ul>
body>

1.3.7子代选择器

e>f{属性1：属性值1；.....}
子选择器只有对直接后代有影响的选择器
对“孙子”以及对各层的后代不产生作用

  div > a{
            color: red;
        } 
    style>
head>
 
<body>
    <h1>这是一个段落h1>
    <div id="one" class="test demo">
        <h2 title="computer class one">hello wordh2>
        <a href="http://www.baidu.com" title="baidu">百度用一下a>
        <br>
        <p>
            <a href="http://www.12306.com">12306a>
        p>
 
 
        <ul>
            <li><h2>榴莲h2>li>
            <li>苹果li>
            <li>凤梨li>
            <li>火龙果li>
        ul>
    div>

1.38相邻选择器

1.3.9伪类选择器

“：hover”。当鼠标悬浮在元素上方时，像元素添加样式。
“：link”。向未访问的链接添加样式。
“：visited”。向已被访问的链接添加样式。
“：active”。向被激活的元素添加样式。
“：focus”。向拥有键盘输入焦点的元素添加样式。
“：fist-child”。向元素的第一个子元素添加样式。
“：lang (语言代码)”。向带有指定lang属性的元素添加样式。

a:hover必须在a:link和a:visited之后，才有效。

a:active必须在a:hover之后，才有效。

 选择符:link {color:#FF0000;} /* 未访问的链接 */
选择符:visited {color:#00FF00;} /* 已访问的链接 */
选择符:hover {color:#FF00FF;} /* 鼠标划过链接 */
选择符:active {color:#0000FF;} /* 已选中的链接 */

1.3.10伪元素选择器

:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。
:before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

和content属性一块使用在元素之前

 h1:before {content:url(smiley.gif)
	"文本";
	}

:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

和content属性一块使用在元素之后

1.3.11选择器分组

 h2, p{
      colr:gray;
}

1.4选择器优先级

1.5 `css`单位

字体相对单位有：em，ex,ch,rem;
视窗相对单位有：vw , vh , vmin , vmax;
绝对长度单位固定尺寸是物理量单位：cm,mm,in,px,pt,pc;
- 使用广泛的有：em,rem,px,%来度量页面元素的尺寸。
- %：它是一个纯粹的相对长度单位。
- in：英寸（1in=96px=2.54cm）。
- cm
- mm
- pt:point,大约1/72英寸;(1pt=1/72in).
- px：像素
- em：浏览器默认字体大小为16px。则2em=32px。
- rem：相对根元素字体尺寸的倍数，1rem=16px。

1.6 给标签元素添加属性

 /*...*/

2 .网页基础样式添加

2.1背景

2.1.1背景色background-color

background-color：颜色值;

background-color属性用来纯色填充背景，在css用来设置网页，div,表格，单元格等元素的背景

2.1.2背景图background-imge

 background-imge：url(图片路径)|none；

none表示不显示背景图像

../表示上级

2.1.3背景图平铺background-repeat

repeat:水平和垂直两个方向平铺

no-repeat:不平铺，背景图像只显示一次

repeat-x:只沿水平方向平铺

repeat-y:只垂直平方向平铺

round:

space:

2.1.4背景图像滚动background-attachment

该属性有三个部分

scroll（滚动）：背景图片移动

fixed（固定）：背景图片不动

inherit(继承)：

2.1.5背景图定位background-position

用来控制背景图片在元素的位置

三种方式

像素表示：Xpx（表示水平的位置） Ypx（表示垂直的位置）

百分比表示：X% Y%；

关键词表示：x，y；

水平方向关键词：left（居左），center（居中），right（居右）；

垂直方向关键词：top（顶部6），center（居中），bottom（底部）；

2.1.6背景复合属性

2.2文本

2.2.1文本颜色

 color："颜色值"

2.2.2水平对齐text-align

 text-align:"center";表示文本排列居中
left

right

center

justify

2.2.3文本缩进

 text-indent：单位长度；

使用：em或者px表示

2.2.4行高

 line-height: 20px ;

normal:表示默认行高

长度单位：用 px表示

百分比：用%表示

数值：用1.5表示1.5倍的行距

2.2.5垂直对齐

经常用来设置图片与文本的对齐方式

 vertieal-align:left；

2.2.6文本装饰

2.3字体

font

2.3.1字体类型

2.3.2字体大小

2.3.3字体风格

2.3.4字体粗细

2.3.5字体复合属性

2.4超链接样式

2.5列表

2.5.1列表符号

2.5.2图片符号

2.5.3列表位置

2.5.4列表综合设置

2.6表格

2.6.1 border-collapse属性

2.6.2 border-spacing属性

2.6.3 empty-cells属性

2.6.4 table-layout属性

2.6.5 caption-side属性

2.7设置网页元素的样式

2.7.1超链接样式设置

2.7.2列表样式

2.7.3全局字体文本设置

2.7.4头部样式

3.网页布局

3.1`DIV`进阶（盒子模型）

3.1.1宽高

3.1.2改变盒子大小计算方法

3.1.3边框

3.1.4轮廓

3.1.5内边框

3.1.6外边框

3.1.7外边距合并

3.2给页面元素添加盒子

3.2.1新闻列表

4.网页排版

4.1布局与定位

4.1.1相对定位

4.1.2绝对定位

4.1.3固定定位

4.1.4堆叠

4.2浮动

4.2.1概述

4.2.2浮动

4.2.3图文绕排

4.2.4浮动清除

4.2.5

4.3页面元素位置排版

4.3.1浮动列表菜单

4.3.2页面中的左右结构布局及新闻列表样式

相关阅读:
便捷高效的文件批量备份与清理！轻松管理您的文件存储！
coding上的免费的编译、打包、推镜像工具(cicd)太强了，必须分享一下
PHP反序列化与SESSION
Nginx盗链和防盗链
Android 12.0 SystemUI状态栏屏蔽掉通知栏不显示通知
three.js(二)：webpack + three.js + ts
GUI-Guider软件使用
首次去中心化抢劫？近2亿美元损失：跨链桥Nomad 被攻击事件分析
CSS
Numpy：连续索引元素赋值失败的问题

原文地址：https://www.cnblogs.com/aixiaohou/p/16944432.html

	<style type = "text/csS">
	选择符1{样式属性：样式属性值;样式属性：样式属性值…}
	选择符2{样式属性：样式属性值；样式属性：样式属性值;…}
	选择符3{样式属性：样式属性值；样式属性：样式属性值;⋯}
	style>

	<head>
	<link href="style.css" rel="stylesheet" type="text/css"

	<html>
	<head>
	<meta charset="utf-8">
	<title>id选择器title>
	<style>
	#para1{
	text-align:center;
	color:red;
	}
	style>
	head>

	<body>
	<p id="para1">id选择的部分p>
	<p>这个段落不受该样式的影响。p>
	body>
	html>

	<style>
	p.center{
	text-align:center;
	}
	style>
	<body>
	<h1 class="center">这个标题不受影响h1>
	<p class="center">这个段落居中对齐。p>
	body>

	<style>
	.center {
	text-align:center;
	}
	.color {
	color:#ff0000;
	}
	style>

	<body>
	<h1 class="center">标题居中h1>
	<p class="center color">段落居中，颜色为红色。p>
	body>

	<body>
	<ul>html:<a href="网址地址">htmla>li>
	<ul>css:<a href="网址地址">cssa>li>
	<ul>javaScript:<a href="网址地址">javaScripta>li>
	ul>
	body>

	div > a{
	color: red;
	}
	style>
	head>

	<body>
	<h1>这是一个段落h1>
	<div id="one" class="test demo">
	<h2 title="computer class one">hello wordh2>
	<a href="http://www.baidu.com" title="baidu">百度用一下a>
	<br>
	<p>
	<a href="http://www.12306.com">12306a>
	p>


	<ul>
	<li><h2>榴莲h2>li>
	<li>苹果li>
	<li>凤梨li>
	<li>火龙果li>
	ul>
	div>

	选择符:link {color:#FF0000;} /* 未访问的链接 */
	选择符:visited {color:#00FF00;} /* 已访问的链接 */
	选择符:hover {color:#FF00FF;} /* 鼠标划过链接 */
	选择符:active {color:#0000FF;} /* 已选中的链接 */