CSS(一)——CSS基础知识

最新推荐文章于 2024-06-12 12:52:53 发布
最新推荐文章于 2024-06-12 12:52:53 发布
阅读量370 收藏 2
点赞数 3
分类专栏： # CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rjlmylover_zyw/article/details/121177916
版权
文章内容文章链接
CSS(一)——CSS基础知识https://blog.csdn.net/rjlmylover_zyw/article/details/121177916?spm=1001.2014.3001.5501
CSS(二)——CSS3基础知识https://blog.csdn.net/rjlmylover_zyw/article/details/121285895?spm=1001.2014.3001.5501

文章目录

一、CSS作用

CSS就是给HTML装饰

二、CSS语法

在style里写CSS
由选择器 后面在大花括号里写声明
CSS声明要以 “; ”结束
在这里插入图片描述

三、CSS用法

id选择器和class选择器（！！！）

1.id选择器
可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<head>
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>

2.class选择器
跟id选择器的用法差不多，只不过是用".“来定义，html里面用"class=”" "来命名

<head>
<style>
.center
{
	text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>

下面是CSS基础选择器
在这里插入图片描述

Text文本！！

1.！！对齐文本text-align

h1 {text-align:center;}

center就是居中
除了center 还可以有right，left，就是右对齐和左对齐
2.缩进文本text-indent

p {text-indent:50px;}

indent后面跟的就是缩进几个字符，如果是首行缩进两个字符那样的话就是

p {text-indent:2em;}

3.！！装饰文本text-decoration！！

a {text-decoration:none;}
  • text-decoration后面可以跟none 就是没有装饰，一般用途就是把链接自带的下划线消除
  • 还可以跟overline上划线，afterline下划线，line-through删除线

4.文本转化text-transform
用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

uppercase 字母大写 lowercase字母小写 capitalize每个单词首字母大写

5.颜色color

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

以上是比较常用的文本，下面是所有文本属性

在这里插入图片描述

注意： letter-spacing是控制每个字母间距，word-spacing是每个单词间距 如果要控制汉字间距的话还是用letter-spacing

字体font！

1.font-style
font-style:normal;正常
font-style:italic;斜体
2.font-weight
文字粗细 一般用normal正常 也是400px
大于400px就加粗，小于就变细
3.font-size
字体大小 多少多少px px是单位
4.font-family
字体系列
常用微软雅黑 宋体

CSS创建！！！

1.外部样式表（常用）
是在head下面插入link标签，再新建一个.css文件，在.css文件里面写CSS内容，像这样：

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

href里面就是CSS链接名，注意路径问题， 外部样式表在以后是最常用的

2.内部样式表
在html的head里加style属性，在style里写css，像这样

<head>
<style>
hr {
	color:sienna;
}
p {
	margin-left:20px;
}
body {
	background-image:url("images/back40.gif");
}
</style>
</head>

3.内联样式表（不推荐使用）
在相关的标签内使用样式（style）属性即可。要慎用。具体就像这样

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

复合选择器！！！

1.后代选择器
在这里插入图片描述

2.子代选择器
元素1>元素2 {样式声名}
元素2是元素1 的亲儿子，离元素1最近的
3.并集选择器
在这里插入图片描述

4.伪类选择器
主要用链接伪类
在这里插入图片描述

注意： hover要在link visited 后面，才会有作用

列表

无序列表的 li 前面默认的是小圆点，css可以给他换了
有序列表的 li 前面默认是1.2.3.4… 咱用css也能给他换了，
就像这样

ul.a {
	list-style-type: circle;
}换成空心小圆点
ul.b {
	list-style-type: square;
}小方块 
ol.c {
	list-style-type: upper-roman;
}罗马数字
ol.d {
	list-style-type: lower-alpha;
}小写字母样式

把默认的清除是这样

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

注意： 列表也可以用来排版，每个 li 是一个div ，这时候就要用上面的代码把那些默认符号清除

表格

表格边框

table, th, td
{
    border: 1px solid black;
}

但这样的边框是双着的，因为th/ td元素有独立的边界。那么要想弄成单边框这样写

table {
 	border-collapse：collapse
 }

然后还有表格宽度width，高度height
可用多少多少px，多少多少em，或者百分号来描述

在表格里，也可以用
td {text-align:right;}来让单元格里的文本对齐，或者center居中

如果 要控制边框和表格内容之间的间距用padding，像这样

td{
	padding:15px;
}

当然，color来设置表格颜色

注意 其实一般我们都会用div，div就是一个盒子，也可以设置边框，表格可以方便排版

div {
	border：1px solid #fff
}

背景

  • background-color 背景颜色
body {
background-color:#b0c4de;
}
  • background-image 插入背景图片
body {
background-image:url('paper.gif');
}

其中，url后面是图片名

  • background-repeat平铺

可以定义图片repeat-x在水平方向平铺，或者no-repeat 不重复

body {
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
  • background-attachment 就把图片固定
    官方说明就是 背景图像是否固定或者随着页面的其余部分滚动。
body { 
background-attachment:fixed;
}
  • background-position背景图片位置
 body {
 background-position:center;
 }
 还可以是right，left，right top ，left top

注意： 插入背景图片和直接插入HTML（img src=""）图片的区别：
插入背景图片可以更好的控制图片位置

盒子模型！！！！

在这里插入图片描述

1. 边框border
-width/-style/-color 分别是粗细，样式，颜色
border-style 可以是solid实线，dotted点线，dashed虚线，一般我们常用solid
要不想有颜色的话用transparent 透明的意思
还可以分别设置四条边框的样式
用border-top/border-bottom/border-left/border-right来定义就行了

注意：border会影响盒子大小

2. 内边距padding
跟border一样可以分别设置四条边用-top来定义就行了
简写：
在这里插入图片描述

  • 在设置盒子div的时候，可以不加宽，只加相同的padding，让它自己撑开，在一些时候可以这样，看着美观
  • 在div套娃的时候，不用写width，只写padding就可以让俩盒子一样宽

3. margin外边距

  • 除了是控制俩盒子的距离外，还有一个用处是 让盒子水平居中（块级盒子） 但必须满足这两个条件
    圈1 盒子必须有宽度
    圈2 盒子的左右margin为auto 即margin：auto或者margin：0 auto
  • 那么，要想让行内或者行内块元素水平居中咋办捏
    这样办： 给他们的父级元素加 text-align：center
  • 还有在套娃的时候会出现凹陷问题 解决方法就是合并 可以给元素定义 上边框，上内边框，或者 overflow：hidden

隐藏display和visibilit！！！

  • display可以用来隐藏元素，用法:display:none (不占空间）

display还可以来转换
比如把块级元素变成行内元素这样办： display：inline
块级是block 行内块是inline-block 类似的 在display后面定义就行了

  • visibility来隐藏，用法： visibility：hidden（会占未隐藏时的空间）

position定位！！！！！！

定位=定位模式+边偏移 定位模式有 static，relative，absolute，fixed，sticky
边偏移就是top，bottom，left，right

当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

 body {
    margin: 0;
    padding: 0;}

  • static默认

  • relative相对位置 （很重要）
    是相对其正常位置，但它原来所占的位置空间不变
    主要用来限制别的定位，常与absolu搭配使用

  • absolute 定位（很重要）
    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于整个页面 不占空间 且脱标（比浮动还飘）

"子绝父相"
父元素里加相对位置，子元素里加绝对位置，这样就可以让加了绝对位置的子元素，在父元素的相对框架里摆放。很重要，很常用。

注意：加了绝对位置的子元素会以最近一级 带有定位的祖先元素为参考，如果都没有定位的话，就会以页面为参考。
在这里插入图片描述

>让绝对定位的盒子居中

> .div {position :absolute;
> 		left :50%;
>		margin-left :-100px;/*负号后面的值是height值的一半*/
>		margin-height :-100px;/*负号后面的值是height值的一半*/
>		width :200px;
>		height :200px;}
  • fixed定位
    即使窗口是滚动的它也不会移动：
    它仅仅是以可视窗口为参考，与父元素没关系。
 p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

fixed一个应用*:让一个盒子固定在版心的左侧

.div {
 position:fixed
left:50%
/*假定版块的width为200px*/
margin-left:100px
}
  • sticky
    粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
    它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
    很漂亮的一个东西，但兼容性差，一般不会使用。我们所见的网页上类似这样的功能是用JS写出来的。
    具体这样使用
.div {position：sticky
            top：0}
            /*必须有top bottom left right至少其中一个才有效*/

简单总结一下position
在这里插入图片描述

z-index属性

指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
z-indx后面的数值越大，所定义的元素越在前面显示

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

运行出来是这样
在这里插入图片描述

注意
z-indx后面的数一定没有单位！！！！！
只有定位的盒子才能使用z-indx！！！！！！

overflow！！

属性用于控制内容溢出元素框时显示的方式。
可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
在这里插入图片描述

css三大属性！！

1.层叠性
在这里插入图片描述

2.继承性
给父元素设置属性后，后代元素也可以使用该属性
3.优先级

内联>id>class=伪类=属性>标签=伪元素
在这里插入图片描述

就是专属是最厉害的，但也有叠加

浮动！！！！！！

  • 标准流是竖着排的，浮动就可以让元素横向排列

  • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    可以让块级元素在一行上面显示（没有空隙）

  • 浮动可以用来指定任意元素

  • float：left/right浮动这样写

特点：

  1. 会脱标 不再保留它原来的位置 浮动后面 的元素会占据它原来的位置（如果后面的元素没有设置浮动的话）（占据它原来的位置就是 后面没有设置浮动的元素 会紧靠着标准流的位置）
  2. 会在一行内显示且元素顶部对齐
  3. 具有行内元素的特性

注意

浮动经常搭配父元素使用，让父元素排上下，再在父盒子里面加float，排左右
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的

> 清除浮动

-为什么要清除浮动

一些父盒子不方便设置height，当父盒子height为0的时候，后面的盒子不想受已经浮动盒子的影响，那么就再设置清除浮动
所谓清除浮动就是清除浮动的影响
-清除浮动的方法
1.在这里插入图片描述
再在style里设置这个新的空标签：.clear：both {clear=both；}

2.在这里插入图片描述
3.在这里插入图片描述
4.在这里插入图片描述

对齐

块级元素

水平居中

margin:auto
width:100px
/*一定要设置width*/
  • 垂直居中
    1.设置padding
    2.position 子绝父相
    3.transtion：translate（x，y）

其实布局最好用的就是display：flex(后面具体写关于flex布局）
具体做法就是给父元素加
display：flex；
justify-content：center；
/ * 默认主轴为X轴，主轴居中 * /
align-text:center;
/*这里表示垂直居中*/

行内、行内块元素

水平居中
给其父元素添加text-align：center

  • 垂直居中
    给其设置line-hight：56px（值为其所在盒子的高）

当然，定位和浮动也可随时使用

图片
把图片放进块元素，再设置margin：auto

伪类

首先区分伪类和伪元素
在这里插入图片描述

- 链接伪类

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

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

- 结构伪类！！

1.nth-child
在这里插入图片描述

可以使用:first-child 伪类来选择父元素的第一个子元素。
last-child即来选择父元素的最后一个元素。

例如

<head>
 <style>
p:first-child {color:blue;} 
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
</body>

在浏览器中显示
在这里插入图片描述

注意
nth-child执行时的语法规则在这里插入图片描述
即nth-child会先去看后面括号里的数字，再看前面的父元素

另外关于nth-child（n）
在这里插入图片描述

2.nth-of-type
在这里插入图片描述

与first-child类似，first-of-type即为指定类型父元素E的第一个子元素
与nth-child不同的是语法规则
在这里插入图片描述
nth-of-type会先看前面的父元素，再看后面括号里的第几个子元素。

- lang伪类

:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang=“en” 的 元素定义引号：

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

在浏览器中显示
在这里插入图片描述

伪元素

1.:first-line 伪元素

用于向文本的首行设置特殊样式。
注意：“first-line” 伪元素只能用于块级元素。

2.:first-letter 伪元素

用于向文本的首字母设置特殊样式
注意： “first-letter” 伪元素只能用于块级元素。

伪元素可以结合CSS类

p.article:first-letter {color:#ff0000;}

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

3.：：before和：：after！！

在这里插入图片描述

注意：
：：before是在body里找不着的！！
必须有content：""
before是在父元素的前面创建一个行内元素，after同。

不透明度

opacity后面跟0.0-1.0
值越小越透明
通常会与hover搭配使用

但！ 使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：

像这样在这里插入图片描述
我们可以用RGBA设置背景色，这样就只改变了背景颜色，文本不受影响。
在这里插入图片描述

导航栏!!

- 垂直导航栏

1.一般会用<ul> <li>来排版
2.消除标签前面的小圆点：list-style-type：none
3.导航栏里一般是链接，是行内元素，要想让链接垂直显示，要转化为块级元素display：block，接着可以设置宽高，用text-align：center让文本居中
4.通常还会使用a：hover
5.向当前链接添加 “active” 类，以使用户知道他/她在哪个页面上

- 全高固定垂直导航栏

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全高 */
  position: fixed; /* 使它产生粘性，即使在滚动时 */
  overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}

- 水平导航栏

1.<ul><li>是块级元素，要想让其水平显示，添加display：inline
2.设置padding让其更美观
3.设置float::left
其与垂直导航栏类似操作

为 <ul> 添加 position: sticky;，以创建粘性导航栏。
粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置
但sticky的兼容性不大，不常使用。

下拉菜单！！

通常会结合position display：none和block z-index
然后就是基本的hover标签
主要是display隐藏的应用

<style>

/* 设置下拉按钮 */
.dropdown {
  position: relative;
  display: inline-block;
}
/*  下拉内容 隐藏 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
/* 鼠标经过时隐藏的元素显示*/
.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

可再结合前面，完成下拉导航

图像精灵

  1. 图像精灵是单个图像中包含的图像集合。
    包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。
    使用图像精灵将减少服务器请求的数量并节约带宽。
  2. 一般通过将所需图片插入为背景图片，进而控制图片大小，位置。
  3. 要精确测量所需图片的大小，才能更好的展现效果。
#prev {
	/*所需图片的宽高 设置为盒子宽高*/
  left: 63px;
  width: 42px;
  /*调整图片，让所想效果展现*/
  background: url('/i/css/navsprites_hover.gif') -47px 0;
}

这里是引用

属性选择器！

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用

1. [attribute] 选择器

下例选择所有带有 target 属性的 <a> 元素；

a[target] {
  background-color: yellow;
}

2. [attribute=“value”] 选择器
下例选取所有带有 *target="_blank" 属性的 <a> 元素*：

a[target="_blank"] { 
  background-color: yellow;
}

3. [attribute~=“value”] 选择器

[attribute~=“value”] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 “flower” 单词的所有元素：

[title~="flower"] {
  border: 5px solid yellow;
}

4. [attribute|=“value”] 选择器
[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。

注：值必须是完整或单独的单词，比如 class=“top” 或者后跟连字符的，比如 class=“top-text”。

下例选取 class 属性以 “top” 开头的所有元素：

[class|="top"] {
  background: yellow;
}

5. [attribute^=“value”] 选择器
[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。

提示：值不必是完整单词！

下例选取 class 属性以 “top” 开头的所有元素：

[class^="top"] {
  background: yellow;
}
/*下面将都被选中*/
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

6. [attribute$=“value”] 选择器

[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。

提示：值不必是完整单词！

7. [attribute*="value"] 选择器
[attribute*=“value”] 选择器选取属性值包含指定词的元素。

提示：值不必是完整单词！

表单

  1. 用pleaceholder代替value（这其实是HTML5里面新增的属性）
  2. 使用 padding 属性在文本字段内添加空间。
  3. 默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; 来消除此行为。
  4. 自动获得焦点autofoucs（这也是HTML5里面的新增内容）
  5. 如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：
input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  /*留出内容 与边框与图片之间的空隙*/
  padding-left: 40px;
}
  1. 使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：resize: none;
  2. 其他表单属性都可以用CSS来设置

计数器

- 带计数器的自动编号

counter-reset - 创建或重置计数器
counter-increment - 递增计数器值
content -插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

下面的例子为页面（在 body 选择器中）创建一个计数器，然后为每个 <h2> 元素增加计数器值，并在每个 <h2> 元素的开头添加 "Section <value of the counter>:"：

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>使用 CSS 计数器：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>

在浏览器中显示
在这里插入图片描述

  • 嵌套计数器
    下面的例子为页面（section）创建一个计数器，为每个 <h1> 元素（subsection）创建一个计数器。

“section” 计数器为每个 <h1> 元素计数，同时写入 “Section” 以及 section计数器的值，“subsection” 计数器为每个 <h2> 元素计数，同时写入 section 计数器的值以及 subsection计数器的值：
`body {
counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>


<h1>HTML 教程：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>

<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML 教程：</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>`

在浏览器中显示
在这里插入图片描述

  • 我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串：
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

</body>

在浏览器中显示
在这里插入图片描述

CSS单位

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。

对于某些 CSS 属性，允许使用负的长度。

长度单位有两种类型：绝对单位和相对单位。

- 绝对单位

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

在这里插入图片描述

- 相对单位

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
在这里插入图片描述

rjlmylove_zyw
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html——css基础知识.md
11-07
基础知识必会
DIV+CSS教程——第一天XHTML_CSS基础知识
08-13
DIV+CSS教程——第一天XHTML_CSS基础知识
CSS——CSS基础（一篇就够用）
qq_46368050的博客
02-16 186
CSS——CSS基础（一篇就够用） 一.CSS概述1.什么是css2.作用3.css和html属性的使用原则 二.CSS语法规范1.css的使用方式①行内样式，内联样式②内部样式③外部样式 2.css的样式特性①继承性②堆叠性③优先级④调整优先级 ...
CSS——CSS基础知识
流楚丶格念的博客
06-26 7279
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS基础知识——常用基础命令
qq_45864756的博客
08-30 1237
CSS基础内容
CSS基础——看这一篇就够了
m0_53619602的博客
05-18 9687
目录 一、CSS简介 1.CSS是什么？ 2.CSS的作用 3.CSS的构成 二、CSS选择器 1.基础选择器 （1）.标签选择器 （2）类选择器 （3）标签选择器 (4) 通配符选择器 2.复合选择器 （1）后代选择器（包含选择器） （2）子选择器 （3）并集选择器 （4）伪类选择器 三、基本属性 1.字体属性 1.1 字体系列font-family 1.2 字体大小 font-size 1.3 字体粗细 font-weight 1.4 文字样式...
CSS基础——布局
weixin_43207208的博客
06-05 3666
五种不同的布局方式的基本介绍
【Educoder】CSS答案(CSS——基础知识、CSS——基础选择器、CSS——文本与字体样式、CSS——背景样式、CSS——表格样式)
qq_37746855的博客
04-14 7542
文章目录CSS——基础知识初识CSS：丰富多彩的网页样式CSS样式引入方式index.htmlstyle.cssCSS——基础选择器CSS 元素选择器CSS 类选择器CSS id选择器CSS——文本与字体样式字体颜色、类型与大小字体粗细与风格文本装饰与文本布局CSS——背景样式背景颜色背景图片背景定位与背景关联CSS——表格样式表格边框表格颜色、文字与大小 CSS——基础知识 初识CSS：丰富多彩的网页样式 编程要求 在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其C
CSS从入门到精通——基础知识
weixin_54327001的博客
12-13 3605
第1关：初识CSS：丰富多彩的网页样式 任务描述 本关任务：通过编写CSS给网页添加基本的样式。显示效果如下： 为了完成本关的任务，请大家认真阅读相关知识 相关知识 CSS基本概念 CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。 在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。 所以，HTML 与 CSS 结..
CSS基础——margin负值实际运用
qq_28695495的博客
10-23 284
【代码】CSS基础——margin负值实际运用。
Educoder/头歌JAVA——CSS从入门到精通——基础知识
舟舟的博客
12-10 4724
层叠样式表（Cascading Style Sheets， CSS）是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，由W3C定义和维护。 本实训面向零基础、入门级的Web技术学员，将介绍CSS的基本概念、语法和应用实例。通过丰富有趣的实例，你将掌握基本的CSS知识，结合之前学习的HTML知识，为文本和背景添加样式，实现不同的网页布局方式，制作多彩的动画效果等等。
CSS基础知识介绍——CSS入门
qq_37196494的博客
07-14 119
CSS是层叠样式表，即多重样式定义被层叠在一起成为一个整体 在网页设置中是标准的布局语言，用来控制元素的尺寸、颜色和排版 CSS 3新增的功能： 属性选择器、伪类结构选择器和UI元素状态伪类选择器（解决在页面中添加大量class、id和JavaScript脚本的问题） 透明度——允许开发人员为颜色添加Alphat通道，为单个元素中的颜色设置透明度 多栏布局 多个背景图像 文本和...
CSS——border基础知识.docx
02-27
.
CSS知识思维导图——培训总结
05-23
都是基础知识
JavaWeb——css基础知识与它的三种使用方法和三种选择器
01-08
什么是css css，全称Cascading Style Sheets，中文名：层叠样式表。它是一种用来表现（表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等）HTML或XML等文件样式的计算机语言，是用于增强控制网...
CSS中，设置 0.5px 会生效吗
最新发布
Keep trying, keep going
06-12 344
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 245
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
CSS从入门到精通——背景样式
m0_73614626的博客
06-12 1257
当页面较长时，滚动页面，背景图像也会随之滚动。从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用。请在右侧的编辑框中修改。属性设置元素的背景属性，常见的网页背景图就是这样设置的。文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
HOW - CSS 常见效果实现
weixin_58540586的博客
06-11 902
常见 CSS 效果实现总结。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值