摘要:的声明内联样式在元素内部在标签上使用属性进行声明。此声明只作用于当前标签。拥有最高优先级。注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。元素的位置相对于浏览器窗口是固定位置。
CSS 指层叠样式表(Cascading Style Sheets), 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。
HTML只负责网页的内容,标签尽量只负责语意不负责样式。CSS 主要负责网页的样式,给网页进行布局,解决了内容与表现分离的问题。
CSS 可以重复使用,避免代码冗余。但依赖于HTML。
在 html 标签上使用 style 属性进行声明。此声明只作用于当前 html 标签。
拥有最高优先级。
<p style="color: blue;size: 34px">这是个内联样式p>
在 head 标签中使用 style 标签声明。此声明一般声明当前网页的公共样式或者给某个标签的多带带样式。
在 head 标签中使用 link 标签引入外部声明好的 css 文件。解决了不同网页间样式重复使用的问题。
<link rel="stylesheet" type="text/css" href="css/style.css" />
注意:内联样式的优先级最高。而内部样式表和外部样式表,若给同一标签定义样式,则谁后声明就执行谁。
<style type="text/css"> p { color:yellow; size: 30px; } style> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> p { color:yellow; size: 30px; } style>
标签名{ 样式名 : 样式值 ; ...}
会给当前网页内所有该标签增加相同的样式。
<head> <style type="text/css"> /*标签选择器*/ p { color: yellow; size:40px; } style> head> <body> <p>这是个黄色p> body>
#标签的id属性值{ 样式名 : 样式值 ; ...}
给某个指定的标签添加样式。id 属性不要以数字开头,一个 id 值最好只赋值一次。
<head> <style type="text/css"> /*id选择器*/ #red { color: red; size:40px; } style> head> <body> <p id="red">这是个红色p> body>
.类选择器名{ 样式名 : 样式值 ; ...}
给不同的标签添加相同的样式。类名的第一个字符不能使用数字。
<head> <style type="text/css"> /*类选择器*/ .ppp { color: red; size:40px; } style> head> <body> <p class="ppp">这是个红色p> <p class="ppp">这是个红色p> body>
* { 样式名 : 样式值 ; ...}
选择所有的 html 标签添加相同的样式。
/*全部选择*/ *{ margin: 40px; color: orange; }
选择器1,选择器2,...{ 样式名 : 样式值 ; ...}
给不同选择器添加相同样式。
<head> <style type="text/css"> /*组合选择器*/ .ppp,#qqq { color:purple; } style> head> <body> <p class="ppp">这是个紫色p> <p id="qqq">这是个紫色p> body>
选择器1 子标签选择器 ...{ 样式名 : 样式值 ; ...}
<head> <style type="text/css"> /*子标签选择器*/ .ggg a { color:green; } #bbb a { color: #000; } style> head> <body> <p class="ggg"><a href="#">这是绿色a>p> <p id="bbb"><a href="#">这是黑色a>p> body>
标签名【属性名=属性值】{ 样式名 : 样式值 ; ...}
给具备某属性的标签添加样式。
注意:
使用*选择器给整个页面添加基础样式
使用类选择器给不同标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id选择器、属性选择器、内联样式给某个具体的标签添加个性化样式
边框设置
border:5px solid red;
字体设置
font-size:10px; 设置字体大小
font-family:"黑体"; 设置字体
font-weight:bold; 设置字体加粗
字体颜色设置
color:颜色;
背景颜色设置
background-color:颜色;
背景图片设置
background-img:url(路径)
background-repeate:no-repeate; 设置图片不重复
background-size:cover; 设置图片平铺
高和宽的设置
width:
height:
浮动设置
float:left|right
行间距设置
line-height
块级标签,主要用来进行网页布局,会将其中的子元素内容作为一个独立的整体存在。
默认宽度是页面的宽地,但是可以设置。没有默认高度,但是可以撑开。
如果子元素设置了百分比的高或者宽,占据的是div的百分比,不是整个页面的。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充(内边距),和实际内容。
外边距:margin
用来设置元素与元素之间的距离,上下左右均可多带带设置。
margin:0px auto; 上下外边距为0,左右居中
边框:border
用来设置元素边框的大小、形式和颜色。上下左右均可多带带设置。
内边距:padding
设置内容和边框之间的距离,上下左右均可多带带设置。
内容:
设置宽度和高度即可改变内容区域的大小。
position:relative
相对元素原有位置移动指定的距离,可以使用top、left、right、bottom来进行上下左右的偏移。
相对的是自己原本的位置,不改变其他元素位置。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
position:absolute
可以使元素根据参照元素或已定位的父元素来进行移动。
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于
绝对定位的元素会覆盖在其他框。
position:fixed
将元素固定在页面的某个位置,不会随着滚动条的移动而改变位置。
元素的位置相对于浏览器窗口是固定位置。
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1019.html
摘要:我的邮箱地址欢迎大家交流学习纠错此篇博客是我的复习笔记,和学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开的书略读,后记录了标签,元素,属性的具体意义。有些标记有属性,具体格式,以标记为例,其中为标记的属性。我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开htm...
摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...
摘要:内联元素在水平方向上相互挨着,总体上会从左上方流向右下方。,增加元素,设置属性,两个内联元素并排摆放,但只有左右方向有。还能与其它内联元素并排。 写在前面:作为一个刚开始写技术博客的新手,看到有人收藏了文章,写作动力又猛增了。这应该就是写技术博客的好处之一:能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢,因为同时在做freecodecamp上的题,所以节奏有点...
阅读 3620·2021-11-23 09:51
阅读 1639·2021-10-22 09:53
阅读 1328·2021-10-09 09:56
阅读 839·2019-08-30 13:47
阅读 2132·2019-08-30 12:55
阅读 1580·2019-08-30 12:46
阅读 1085·2019-08-30 10:51
阅读 2391·2019-08-29 12:43