CSS定义与引用
定义
定义:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
css页面引入 - 外联式:
定义:通过link标签,链接到外部样式表到页面中。
优点:使得css样式与html页面分离,便于整个页面系统的规划和维护,可重用性高。
缺点:css代码由于分离到单独的css文件,容易出现css代码过于集中,若维护不当则极容易造成混乱。
<link rel="stylesheet" type="text/css" href="css/main.css">
css页面引入 - 嵌入式:
定义:通过style标签,在网页上创建嵌入的样式表。 优点:在同一个页面内部便于复用和维护。 缺点:在多个页面之间的可重用性不够高。
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
css页面引入 - 内联式:
定义:通过标签的style属性,在标签上直接写样式。 优点:方便、直观。 缺点:缺乏可重用性。
<div style="width:100px; height:100px; background:red ">hello</div>
常用的CSS样式
颜色:color
color 设置文字的颜色
color:red;
字体:font
font 同时设置文字的几个属性,写的顺序有兼容问题
建议按照如下顺序写:
font:是否加粗 字号/行高 字体;
font: normal 12px/36px '微软雅黑';
font-family: 指定字体系列
font-family 设置文字的字体
font-family:'微软雅黑';
font-style 字体风格
font-style:'normal'; 设置不倾斜,
font-style:'italic'; 设置文字倾斜
font-weight 设置文字是否加粗
font-weight:bold 设置加粗
font-weight:normal 设置不加粗
font-size: 字体大小
font-size:12px;
文本:text
text 文本设置
text-decoration 设置文字的下划线
text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进
text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,
text-align:center 设置文字水平居中
line-height 设置文字的行高
line-height:24px;
背景:background
background 背景设置
background-color(图片背景颜色)
background-image(背景图片路径)
background-repeat(背景图片是否及如何重复)
background-attachment(背景图片是否固定)
background-position(背景图像的起始位置)
链接:a
a:link 普通的、未被访问的链接
a:link {color:#FF0000;}
a:visited 用户已访问的链接
a:visited {color:#00FF00;}
a:hover 鼠标指针位于链接的上方
a:hover {color:#FF00FF;}
a:active 链接被点击的时刻
a:active {color:#0000FF;}
注意,样式设置时:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
CSS框模型(盒子模式)
margin 外边距 (margin-top margin-right margin-bottom margin-left)
4值,顺时针方向:分别设置上 右 下 左 的margin的值
margin: top right bottom left (顺时针设置)
3个值,顺时针方向:分别设置上 左右 下 的margin的值
2个值,分别设置:上下 和 左右 的margin的值
margin:30 auto; 盒子水平居中
1个值,同时设置四个边的margin
margin: 10%; 百分比设置
margin 合并问题:两个盒子margin重叠去相对比较大的值作为之间的margin值;
margin-top:-1px; 进行边线的合并
border 边框
border: border-width border-style border-color
border:5px solid red;
border-style 常用样式:(https://www.w3school.com.cn/cssref/pr_border-style.asp)
none:定义无边框
solid:定义实线
dashed:定义虚线
border-width 边框宽度
border-color 边框颜色
padding 内边距(padding-top padding-right padding-bottom padding-left)
4值,顺时针方向:分别设置上 右 下 左 的padding的值
padding: top right bottom left (顺时针设置)
padding: 10px 0.25em 2ex 20%;
3个值,顺时针方向:分别设置上 左右 下 的padding的值
padding:10px 5px 15px;
2个值,分别设置:上下 和 左右 的padding的值
padding:10px 5px;
1个值,同时设置四个边的padding
padding: 10% 百分比
常用的CSS定位
行内元素(行内框) 与 块元素(块框) (一切皆为框)
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
元素框正常生成:position : static
position 的默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
元素框偏移某个距离:position : relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
position:relative;:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
元素框从文档流完全删除,并相对于其包含块定位:position : absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
position:absolute;:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
position : fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
相对定位( https://www.w3school.com.cn/css/css_positioning_relative.asp)
定义:相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
相对定位是“相对于”元素在文档中的初始位置
<html>
<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>
</html>
绝对定位( https://www.w3school.com.cn/css/css_positioning_absolute.asp)
定义:绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
注意:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
<html>
<head>
<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>
固定定位
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
浮动 float( https://www.w3school.com.cn/css/css_positioning_floating.asp)
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
float:right; 向右进行浮动操作
clear 属性规定框的哪些边不应该挨着浮动框(如果这个元素没有浮动,相当于我的边不能在已经浮动的标签下面)。letf right both none
clear: both; 在左右两侧均不允许浮动元素
CSS定位属性 overflow
定义:overflow 属性规定当内容溢出元素框时发生的事情。
属性:
overflow:visible;:默认值。内容不会被修剪,会呈现在元素框之外。
overflow:scroll;:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto;:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
overflow:hidden;:内容会被修剪,并且其余内容是不可见的。
overflow-x:hidden;横向内容被修剪
overflow-y:hidden;纵向内容被修剪
常用的CSS选择器
元素 选择器:
定义:最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
类 选择器
定义:类选择器允许以一种独立于文档元素的方式来指定样式。
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
<style>
.important {color:red;} // 或 *.important {color:red;} 全部使用class = "important" 的元素
//指定 使用class = "important" 的元素
p.important {color:red;}
h1.important {color:blue;}
</style>
多类选择器,通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
ID 选择器
定义:ID 选择器允许以一种独立于文档元素的方式来指定样式。
语法:
首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
<p id="intro">This is a paragraph of introduction.</p>
<style>
#intro {font-weight:bold;}
</style>
属性 选择器( https://www.w3school.com.cn/css/css_selector_attribute.asp)
定义:属性选择器可以根据元素的属性及属性值来选择元素。
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
伪类及伪元素选择器:一般称为黑魔法解决一些html中的bug
伪类:CSS 伪类用于向某些选择器添加特殊的效果。
.box2:before:
.box2:before{
content:"前面的文字";
color:red ;
}
锚伪类:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
p:first-child {color: red; } /*匹配第一个p元素*/
q:lang(no){ quotes: "~" "~" }/*为属性值为 no 的 q 元素定义引号的类型:*/
伪元素:CSS 伪元素用于向某些选择器设置特殊效果。
":before" 伪元素可以在元素的内容前面插入新内容。
h1:before{
content:url(logo.gif);
}
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after{
content:url(logo.gif);
}
CSS 样式生效的权重计算
权重的计算:
!important 放在对应样式的后面,权重值为10000;
style内联样式,权重值为1000;
ID选择器,权重值为100;
类、伪类和属性选择器,权重值为10;
标签和伪元素选择器,权重值为1;
通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0;
标签:总结,定位,color,元素,基础知识,设置,font,选择器,CSS
From: https://www.cnblogs.com/qingtianyu2015/p/16619138.html