CSS
  • CSS:层叠样式表。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
  • CSS语法:CSS实例由选择器,以及一条或多条声明(属性)两部分组成。每个声明(属性)可以有一个或多个值。属性和值被冒号分开。CSS声明以分号;结束,声明以大括号{}括起来。
p {
color: red;
}
  • CSS注释:CSS中仅支持使用/*  */进行注释
/* 我是注释内容 */
  • CSS引入:引入CSS样式表的方法有三种。外部样式表、内部样式表、内联样式。
<head>
<!--
引入外部样式文件(推荐):<link>标签在写在<head>标签内。外部样式表文件不能包含任何的HTML标签。样式表应该以.css扩展名进行保存。
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
-->
<link type="text/css" rel="styleSheet" href="./study.css" />
</head> <body>
<!-- 行内样式:语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。 -->
<div style="font-style:italic; color:blue;"> Hello there</div>
<div class="a"> Hello A</div>
<!-- 内部样式:语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。 -->
<style>
.a {
color: red;
}
</style>
</body>
CSS选择器
  • CSS选择器(一):用于选取页面上的某个标签,在CSS中称为选择器。
  1. 通配符选择器:通配符选择器是以*选取所有标签。
  2. 标签选择器:直接使用标签名选取该标签名的所有标签。
  3. id选择器:id选择器可以选取到标有该id属性的HTML标签。id选择器以"#"来定义。一个元素只能有一个ID
  4. 类选择器:类选择器可以选取到标有该class属性的HTML标签。类选择器以"."来定义。class选择器有别于id选择器,class属性可以在多个标签中使用。也支持一个标签中有多个class属性值(用空格隔开)。
<!-- 类可以在同个标签上有多个值 -->
<div class="a b c"> Hello A</div>
<!-- 类可以在多个标签上使用 -->
<div class="a b"> Hello B</div>
/* 通配符选择器 */
* {
color: gray;
} /* id选择器 */
#china {
color: red;
} /* 类选择器 */
.america {
color: green;
} /* 标签选择器 */
li {
color: yellow;
}
  • CSS选择器(二):
  1. 后台选择器:两个元素用空格隔开,并且选中的是元素1所有层级的后代
  2. 子代选择器:只能选择子元素
  3. 并集选择器:并集选择器中间用逗号隔开,支持任意其他选择器,多个元素要求竖着写
  4. 伪类选择器:伪类选择器表示的是同一个标签,根据其不同的种状态,有不同的样式。例如<a>标签有点击前和点击后两种状态。
<body>
<ol class="haha">
<li>1</li>
<li>
<p>我是儿子</p>
</li>
<li>3</li>
<p>我是孙子</p>
</ol>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<a href="http://www.baidu.com">百度一下</a>
<input>
</body>
<style>
/* 后台选择器:两个元素用空格隔开,并且选中的是元素1所有层级的后代 */
.haha p {
color: green;
}
/* 子代选择器:只能选择子元素 */
.haha>p {
color: red;
}
/* 并集选择器:并集选择器中间用逗号隔开,支持任意其他选择器,尽量竖着写 */
div,
p,
.haha>a {
color: pink;
}
/* 伪类选择器:伪类选择器表示的是同一个标签,根据其不同的种状态,有不同的样式。例如<a>标签有点击前和点击后两种状态。注意:一定先写静态伪类,后写动态伪类。
1.静态伪类:只能用于超链接的样式。
:link。超链接点击之前(主要是能区分是不是带有href的<a>标签)
:visited。链接被访问过之后
2.动态伪类:针对所有标签都适用的样式。
:hover。悬停,鼠标放到标签上的时候
:active。激活,鼠标点击标签,但是不松手时。
:focus。是某个标签获得焦点时的样式(一般用于输入框获得焦点)
*/
/* 让超链接点击之前 */
a:link {
color: red;
}
/* 让超链接点击之后 */
a:visited {
color: orange;
}
/* 鼠标悬停,放到标签上的时候 */
a:hover {
color: green;
}
/* 鼠标点击链接,但是不松手的时候(激活) */
a:active {
color: black;
}
/* 输入框获取焦点时 */
input:focus {
background-color: palegoldenrod;
}
CSS常用属性
  • CSS度量单位:
单位名称 说明 例子
Piexels(像素) 一个像素的大小根据用户显示器尺寸和像素密度不同而设定 .classname { margin:5px; }
Points(磅) 一英镑等于一英寸的1/72,来源于印刷背景设计。 .classname { margin:5pt; }
Inches(英寸) 1英寸相当于72英镑 .classname { margin:5in; }
Centimeters(厘米) 1厘米比28英镑稍大一些 .classname { margin:5cm; }
Millimeters(毫米) 1毫米等于1/10厘米(约为3磅) .classname { margin:5mm; }
Picas Picas是另一种印刷度量单位,等于12磅 .classname { margin:5pc; }
Ems 一个em等于当前字体的大小,用于描述相对尺寸 .classname { margin:5em; }
Exs 也与当前字体大小有关,等于小写字母x的高度,不常用 .classname { margin:5ex; }
Percent(百分比) 这个单位与em相关,它是相对单位 .classname { margin:125%; }
  • 字体相关属性:可以用CSS设置的四种主要的字体属性:family(字体族)、style(样式)、size(大小)和weight(粗细)。字体一般直接设置在body上用于控制整个页面。
  1. font-family:设置文本的字体
  2. font-size:设置文本的字体大小
  3. font-style:设置文本的字体样式(正常normal、斜体italic、倾斜oblique)
  4. font-weight:设置文本的字体粗细
<style>
div {
height: 50px;
width: 50px;
}
#cqz {
/* 设置文本的字体系列:楷体、宋体等(不推荐汉字,推荐使用英文)。可以设置多个,当前一个浏览器不支持的时候,用第二个,以此类推 */
font-family: "楷体";
/* 设置文本的字体大小:可以使用px、em、百分比。不同浏览器字体默认大小不同,所以必须设定文字默认值。h1等标题标签需要单独指定字体大小。 */
font-size: 16px;
/* 设置文本为斜体:默认normal是正常字体 */
font-style: italic;
/* 设置文本粗细:主要是normal和bold这两个值。blod为加粗。或者可以使用数字(注意不要有单位) */
font-weight: 700;
     /* 复合写法:前两个可以省略,后两个不能省略。 */
     font: font-style font-weight font-size font-family;
}
</style>
<body>
<div id="cqz">曹</div>
</body>
  • 文本相关属性:
  1. color:文本颜色。
  2. text-align:设置文本的水平对齐方式。左对齐(left)、右对齐(right)、居中(center)和两端对齐(justify)。
  3. line-height:设置文本垂直的对齐方式(行高)【实现原理:行高由文字高度 + 上下空隙组成,当父类有高度,则会自动填满上下空隙,保证文字居中。】
  4. word-spacing:设置文本字间距
  5. letter-spacing:设置单词和字符间距
  6. text-transform:设置文本转换。无、首写字母大写、大写和小写。
  7. text-decoration:设置文本装饰。下划线、删除线、上划线、闪烁等。
  8. text-indent:设置首行文本缩进距离。
#cqz {
/* 设置文本颜色(具体设置方式见下文CSS中颜色定义) */
color: #00f0ff;
/* 设置文本水平对齐方式:左对齐(left)、右对齐(right)、居中(center)和两端对齐(justify)。 */
text-align: center;
/* 设置文本垂直对齐方式(设置行高,当行高与父容器的高度相同时且文字仅有一行,则文本垂直居中) */
line-height: 100px;
/* 设置文本装饰:下划线(underline)、删除线(line-through)、上划线(overline)、闪烁(blink)等。注意:<a>标签默认值为underline,想要去除<a>标签的下划线,就将text-decoration设置为none */
text-decoration: line-through;
/* 设置文本缩进:一般设置为em,代表当前文字大小的距离,是一个相对单位 */
text-indent: 2em; }
a {
/* 去除<a>标签的默认下划线 */
text-decoration: none;
}
  • CSS中颜色定义:W3C标准化组织定义的标准的16中颜色的名称分别是:aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(绿黄)、maroon(酱紫)、navy(深蓝)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)。还可以使用十六进制RGB:#ff0000、#00ff00、#0000ff等。还可以使用rgb函数【rgb(0,255,255)】
#cqz {
/* RGB函数 */
color: rgb(0, 255, 255);
/* 十六进制RGB */
color: #fff000;
/* W3C标准色 */
color: red;
}
  • 背景属性:
  1. background-color:设置背景颜色
  2. background-image:设置背景图片
  3. background-repeat:设置背景图片重复/平铺方式
  4. background-position:设置背景图片定位
  5. background-attachment:设置背景图片是否固定或者随着页面的其余部分滚动
  6. background-size:设置背景图片大小【CSS3以前,背景图像大小由图像的实际大小决定】
  7. background:复合写法。任意属性都可以省略。
<body>
<div class="cqz"></div>
</body>
  <style>
* {
margin: 0;
padding: 0;
}
.cqz {
margin-top: 50px;
margin-left: 50px;
height: 1000px;
width: 1000px;
border: 1px solid red;
/* 设置背景颜色 */
background-color: rgb(0, 0, 0);
/* 设置背景图片:默认重复铺满盒子 */
background-image: url("../images/123.webp");
/* 设置背景图片重复平铺方式:
1.repeat 垂直方向和水平方向重复。【默认】
2.repeat-x 水平方向重复。
3.repeat-y 垂直方向重复。
4.no-repeat 背景图像将仅显示一次(不重复)。
*/
background-repeat: no-repeat;
/* 设置背景图片定位:一般建议小图标和超大图片使用背景进行设置而不是<img>
1.需要有两个值。
2.如果仅规定了一个关键词,那么第二个值将是center。
3.方位名词: top left center right(方位名词不区分设置顺序)
4.像素/百分比: 设置像素值时,第一个值是x轴,第二个值是y轴。
*/
/* background-position: center top; */
background-position: 50% 100%;
/* 设置背景图片大小:如果设置了图片大小,图片会被自动拉伸或压缩到设置的大小。 */
background-size: 1000px 1000px;
/* 设置背景图片是否固定或者随着页面的其余部分滚动
1.scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
2.fixed 当页面的其余部分滚动时,背景图像不会移动。
*/
background-attachment: fixed;
/* 复合写法:支持省略任意属性 */
/* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */
}
</style>
元素显示模式
  • 元素显示模式:在CSS中,根据元素显示模式的不同元素标签被分为了两类。行内元素(inline-level)、块级元素(block-level)。
  1. 行内元素:行内元素就是不会独占一行的元素,行内元素不能设置宽度和高度。它的宽度和高度会随着文本的改变而该改变。内部不能填写块级元素。例如:<span> <buis> <strong> <em> <ins> <del>等;
  2. 块级元素:块级元素就是会独占一行的元素,块级元素可以设置宽度和高度,如果没有设置宽度和高度,默认父元素一样宽,高度则为0。例如:<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
  3. 行内块级元素:由于我们有的时候不仅要设置元素的宽度和高度,同时也希望元素不会独占一行,这时就出现了行内块级元素(inline-block)。同一行的行内块级元素会有空白间隔。例如<img><input><td>等。
  • 转换CSS元素的显示模式:设置元素的display属性。inline(行内)、block(块级)、inline-block(行内块级)
<body>
<span>我是行内元素,被转换成了块级元素</span>
<div>我是块级元素,被转换成了行内元素</div>
<img src="../images/1.webp"><img src="../images/1.webp">
</body>
  <style>
* {
margin: 0;
padding: 0;
} /* 将span转换为块级元素 */
span {
display: block;
background-color: red;
width: 400px;
height: 200px;
} /* 将div转换为行内块级元素 */
div {
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
} /* 将img转换为块级元素 */
img {
display: block;
width: 200px;
}
</style>
CSS三大特性
  • CSS三大特性:CSS的三个特性是指层叠性、继承性以及优先级。
  1. 层叠性:层叠性是在HTML中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些样式书写的先后顺序来决定,处于最后面的CSS样式将会覆盖前面的CSS样式。
  2. 继承性:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。合理使用继承可以简化代码,降低CSS样式的复杂性。对于字体、字号、颜色、行距等文本类属性具有继承性,都可以在body中统一设置,然后影响文档中所有文本。但是,并不是所有的CSS属性都可以继承,如边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性
  3. 优先级:在复杂CSS样式表,经常出现两个或多个不同样式规则应用在同一元素上,这时到底采用哪个样式呢?这就是典型的CSS优先级问题。计算优先级有如下规则:继承 < 元素选择器 < 类选择器/伪类选择器 < ID选择器 < 行内样式 < !important
    1. 继承样式的权重为0:在嵌套结构中,无论父元素样式权重多大,子元素继承时,应用在子元素上的权重都为0,即子元素定义的样式会覆盖所有继承来的样式。
    2. 行内样式优先:应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
    3. 就近原则:权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
    4. !important命令:CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。
    5. 权重会叠加,但是永远不会进位。(下面讲解权重叠加问题)
<style>
div {
height: 100px;
/* 层叠性:该属性会被同权重CSS覆盖 */
width: 50px;
margin-left: 50px;
border: black 1px solid;
/* 继承性:该属性会被子标签继承 */
font-size: 20px;
/* 继承性:该属性会被子标签覆盖 */
font-family: "楷体";
}
div {
/* 层叠性:该属性会覆盖上方的同权重CSS */
width: 60px;
}
p {
font-family: "微软雅黑";
}
</style>
<body>
<div>
<p>曹老三</p>
</div>
</body>
  • 权重叠加问题:每种选择器的权重见下方表格。样式继承的权重为0,复合选择器使权重叠加,权重之间不能越界,11个类也没有id的权重大
选择器 权重
0000 0000
标签选择器 0001
类选择器与伪类选择器 0010
ID选择器 0100
行内样式 1000
!important   +∞
<body>
<div class="father" id="fatherid">
<div class="child1" id="child1Id">孩子1</div>
</div>
</body>
  <style>
* {
margin: 0;
padding: 0;
/* 权重为0 */
background-color: pink;
} .child1 {
/* 权重为0010 */
background-color: red;
} .father .child1 {
/* 权重为0020 */
background-color: black;
} #fatherid .child1 {
/* 权重为0110 */
background-color: green;
} #child1Id {
/* 权重为0100 */
background-color: wheat;
} #fatherid #child1Id {
/* 权重为0200 */
background-color: greenyellow;
} .child1 {
/* 权重为+∞ */
background-color: hotpink !important;
}
</style>

CSS(1)基础语法、常见属性的更多相关文章

  1. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  2. CSS 的基础语法

    1.基础语法规则 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开. selector {property: val ...

  3. HTML——CSS的基础语法1

    页面中所有CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择text/css,但是type属性可以省略. 1.CSS常用选择器 ...

  4. HTML——CSS的基础语法2

    一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...

  5. [JavaWeb基础] 028.CSS简介和基础语法

    css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  6. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  7. CSS基础【2】:CSS常见属性

    CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...

  8. CSS基础语法(一)

    目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...

  9. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  10. css常见属性

    css常见属性 1.颜色属性 1.1 color属性定义文本的颜色 1.2 color:green 1.3 color:#ff6600 可简写为#f60 1.4 color:rgb(255,255,2 ...

随机推荐

  1. 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14

    自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos6.5-14 欢迎加QQ群:1026880196 进行交流学习 制作OpenSta ...

  2. 记一次xss漏洞挖掘

    博客园在整改中,无法更新文章,难受啊... 记录一次react的xss漏洞发现,比较有意思: 某个站: 直接输入<xxx>,直接把我跳转到了404,猜测可能做了一些验证: 尝试多重编码,发 ...

  3. 大数翻倍法求解CRT

    目录 正文 引入 大数翻倍法 复杂度证明 大数翻倍法的优势 最后的最后:上代码! 注:做法和思路是 zhx 在一次讲课中提出的,如有侵权,请联系作者删除 其实别的题解也有提到过暴力做法,但这里将会给出 ...

  4. Docker 实践搭建php环境

    docker 安装 使用官方提供的安装脚本,安装最新版的Docker curl -sSL https://get.docker.com/ | sh 安装完成后,通过如下命令启动Docker的守护进程, ...

  5. 【Redis连接超时】记录线上RedisConnectionFailureException异常排查过程

    项目架构: 部分组件如下: SpringCloudAlibaba(Nacos+Gateway+OpenFeign)+SpringBoot2.x+Redis 问题背景: 最近由于用户量增大,在高峰时期, ...

  6. 【Oauth2.0】Oauth2.0

    一.什么是Oauth2.0? 1.Oauth2.0即(Open Authorization ),Oauth2.0是一个用于第三方授权的开放标准,是Oauth1.0的升级版本,相比1.0版本易于使用: ...

  7. hdu4370 比较抽象的最短路

    题意:       给你一个n*n的矩阵,然后让咱们构造另一个n*n的矩阵,构造的矩阵有如下要求, 1.X12+X13+...X1n=1. 2.X1n+X2n+...Xn-1n=1. 3.for ea ...

  8. Linux文件共享服务之NFS

    NFS(Network File System) 网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,本地NFS的客户端应用可 ...

  9. Python中Numpy模块的使用

    目录 NumPy ndarray对象 Numpy数据类型 Numpy数组属性 NumPy NumPy(Numerical Python) 是 Python 的一个扩展程序库,支持大量的维度数组与矩阵运 ...

  10. MS06-040漏洞研究(下)【转载】

    课程简介 经过前两次的分析,我们已经对Netapi32.dll文件中所包含的漏洞成功地实现了利用.在系统未打补丁之前,这确实是一个非常严重的漏洞,那么打了补丁之后,这个动态链接库是不是就安全了呢?答案 ...