CSS入门,常用样式
一、CSS简介
CSS:层叠样式表(英文全称:Cascading Style Sheets),是一种用来是一种描述 HTML 文档样式的语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
二、CSS语法
CSS 规则集(rule-set)由选择器和声明块组成:
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
示例:
/*选择器选择p标签*/ p{ /*颜色的声明*/ color:red; /*属性:color 值:red*/ /*字体大小的声明*/ font-size:15px; }
三、引入CSS样式的三种方式
内联(行内)样式:
写在标签的属性里面,直接使用
内部样式表:
样式写在<style></style>标签之间
外部样式表:
为一个独立的.css文件,需要通过<link href="路径"/>导入以便使用
基础选择器
标签选择器 标签{各种样式}
类选择器 .类名{各种样式}
id选择器 #id号{各种样式}
字体样式(font)
font-weight bold定义粗体字符
100-900(粗细程度)
font-style字体风格 normal默认/italic斜体
font-family字体类型 隶书、楷体等
font-size 字体大小
文本样式
color 设置文本的颜色
line-height 设置文本的行高
text-indent 设置首行文本缩进
text-align 设置元素水平对齐方式
left(左对齐) center(居中) right(右对齐)
text-decoration 设置文本的装饰
none:默认,标准文本
underline:定义文本下划线
overline:定义文本上划线
line-through:定义穿过文本的一条线
鼠标样式(cursor)
背景样式(background)
background-color 背景颜色
background-image:url(图片路径) 背景图片地址
background-repeat 背景重复方式
no-repeat不重复 repeat-x水平重复 epeat-y垂直重复 repeat默认重复
background-position 背景定位
水平方向:left center right
垂直方向:top center bottom
background-size不能在缩写里设置
背景样式简写background:图片地址,图片重复方式,背景颜色,背景定位
列表样式(list-style)
list-style-type
list-style-image
list-style-position
列表样式简写list-style:列表标记属性,自定义列表标记图片,列表标记定位
CSS伪类
伪类用于定义元素的特殊状态。
例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
如:button:hover { color: blue; }
伪类由冒号(:)后跟着伪类名称组成(例如,:hover)。函数式伪类还包含一对括号来定义参数(例如,:dir())。附上了伪类的元素被定义为锚元素(例如,button:hover 中的 button)。
用法: 标签:伪类{}
常用伪类有以下四个:
link(点击访问前) visited(单击访问后) hover 鼠标悬浮其上 active单击未释放
锚伪类
链接能够以不同的方式显示:
实例
/* 未访问的链接 */ a:link { color: #FF0000; } /* 已访问的链接 */ a:visited { color: #00FF00; } /* 鼠标悬停链接 */ a:hover { color: #FF00FF; } /* 已选择的链接 */ a:active { color: #0000FF; }
注意:a:hover
必须在 CSS 定义中的a:link
和a:visited
之后,才能生效!a:active
必须在 CSS 定义中的a:hover
之后才能生效!
伪类名称对大小写不敏感。
伪类和 CSS 类
伪类可以与 CSS 类结合使用:
当您将鼠标悬停在例子中的链接上时,它会改变颜色:
实例
a.highlight:hover { color: #ff0000; }
悬停在 <div> 上
在 <div> 元素上使用 :hover
伪类的实例:
实例
div:hover { background-color: blue; }
CSS伪元素
而且CSS里不光有伪类,还有伪元素,比如::first-letter,:first-line,:before和:after。
用法: 标签::伪元素{}
常用伪元素有以下两个:after(之后),before(之前)
after顾名思义是在元素后面的意思,实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容,需要和content属性一起使用,设置在对象后发生的内容。
默认地,这个伪元素是inline行内元素,不过可以使用属性 display 改变这一点。
所有主流浏览器都支持 :after 伪元素,但对于IE来说,只有IE8以上版本支持。
下面举个例子,在CSS代码中插入:
<style type="text/css"> h1:after {content:url(logo.gif)} </style> <h1>标题内容</h1>
在显示时,标题内容后会插入一张图片。这就是伪元素:after的作用。
:after伪类的content还可以跟其它的参数
CSS - :first-child 伪类
:first-child
伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。
匹配首个 <p> 元素
在下面的例子中,选择器匹配作为任何元素的第一个子元素的任何 <p> 元素:
实例
p:first-child { color: blue; }
匹配所有 <p> 元素中的首个 <i> 元素
在下面的例子中,选择器匹配所有 <p> 元素中的第一个 <i> 元素:
实例
p i:first-child { color: blue; }
匹配所有首个 <p> 元素中的所有 <i> 元素
在下面的例子中,选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素:
实例
p:first-child i { color: blue; }
CSS - :lang 伪类
:lang
伪类允许您为不同的语言定义特殊的规则。
在下面的例子中,:lang
为属性为 lang="en" 的 <q> 元素定义引号:
实例
<!DOCTYPE html> <html> <head> <style> q:lang(en) { quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p> <p>在本例中,:lang 为 lang="en" 的 q 元素定义引号:</p> </body> </html>
结果如图:
盒子模型
高级选择器
1、交集选择器
由两个选择器连接构成,选中二者范围的交集,两个选择器之间不能有空格。
第一个必须是标签选择器,第二个必须是类选择器或者ID选择器
*/ div.one{}
2、并集选择器
多个选择器通过逗号连接而成
没有先后顺序
*/ h1,span,em{}
3、后代选择器
外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔
所有的后代(直接/间接的后代)
使用标签选择器、地选择器、类选择器没有先后顺序
*/div span{}
4、子元素选择器
通过>连接在一起而成
直接子代选择器(必须是直接自带)
*/div>h1{}
5、属性选择器
选取带有指定属性的元素
选取带有指定属性和值的元素
*/input[name]{}
layout(CSS布局)
1、标准文档流
块级元素
<h1> - <h6>、<p>、<div>、列表等
•总是在新行上开始,占据一整行
•高度,行高以及外边距和内边距都可控制
•宽度始终是与浏览器宽度一样,与内容无关
•它可以容纳内联元素和其他块元素
行内元素
<span>、<a>、<img>、<strong>等
•和其他元素都在一行上
•高,行高及外边距和内边距部分可改变
•宽度只与内容有关
•行内元素只能容纳文本或者其他行内元素
•不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用
display属性作用
控制元素的显示和隐藏
块级元素和内联(行内)元素的转变
none:设置元素不会被显示
inline:元素显示为行内元素
block:元素会被显示为块级元素
inline-block:行内块元素
定位流
position 定位属性:static(默认值,没有定位) fixed relative absolute
top:相对自身原来位置向顶部进行偏移
left: 相对自身原来位置向左侧进行偏移
right 相对自身原来位置向右侧进行偏移
bottom: 相对自身原来位置向底部进行偏移
1.fixed 固定定位
(1) 使用了固定定位的元素【会】脱离标准文档流 宽度由文字撑开,原本位置被占领
(2) 基于 【浏览器窗口】进行偏移
(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移
2.relative 相对定位
(1) 使用了相对定位的元素【不会】脱离标准文档流
(2) 基于自身原来在网页的位置 进行偏移
(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移
3.absolute 绝对定位
(1) 使用了绝对定位的元素【会】脱离标准文档流
(2) 使用了绝对定位的元素以它最近的一个“已经的行为”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位
(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移
z-index属性:调整元素定位时重叠层的上下位置,z-index值大的层位于其值小的层上方默认为0
浮动流
float:是css样式中的定位属性,用于设置标签对象的浮动布局。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
left元素向左浮动 right元素向右浮动 none默认值,元素不浮动
clear属性
none:默认值,允许浮动元素出现在两侧
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both:在左、右两侧不允许浮动元素
overfloat属性
auto:自适应,如果内容被修剪,则浏览器会显示滚动条来查看超出内容
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看超出内容
hidden:内容会被修剪,并且超出的内容是不可见的
visible:默认值。内容不会被修剪,会呈现在盒子之外
英文单词或数字写在div里时要设置word-break:break-all
补充:
/* 去掉标签默认边框 */
outline: none;
/* 去掉浏览器提供的默认样式 */
-webkit-appearance: none;
/* box-shadow:水平阴影距离 垂直阴影距离 阴影模糊距离 阴影颜色 */
transition: linear 3s width; /*transition:匀速 时间 变化的属性 */
transform: scale(1.2); /*transform:scale(倍数) */
原文链接:
https://blog.csdn.net/weixin_53988377/article/details/125858313
https://blog.csdn.net/fuhanghang/article/details/124405220
https://www.laike.net/article-99-148366-0.html
https://www.cnblogs.com/soooos/articles/17391653.html