CSS基础

最新推荐文章于 2022-09-07 23:56:10 发布

programmer11123

最新推荐文章于 2022-09-07 23:56:10 发布

阅读量249

点赞数

分类专栏： HTML+CSS基础文章标签： css html 前端

本文链接：https://blog.csdn.net/programmer11123/article/details/125584157

版权

HTML+CSS基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

what is css
- 层叠样式表，显示HTML元素
- 样式定义如何显示HTML元素
why is css
- 实现内容与样式的分离
- 外部样式表可以极大的提高效率
how css work:

GO AND LEARN!

（一）CSS语法

p {color：red；text-align:center;}

/*
// 选择器选择需要改变样式的HTML元素
// {}内可以有多条声明（属性+值）
// 每个声明以  【分号；】 隔开
// 属性与值以  【冒号：】隔开
*/

（二）选择器

1.id选择器

为所有特定 id 加上定义好的样式

<style>
	#para1				<!--样式运用与id=“para1”的元素-->
  	{
   	  text-align:center;
      color:red;
  	}
</style>

<body>
  <p id="para1">该段落运用了居中加红的样式</p>
  <p>
    这个段落不受该样式影响
  </p>
</body>

2.class选择器

为某类元素指定样式表：

可以是单个元素类型

<style>
  p.center{text-align=center}
</style>

<body>
  <h1 class="center">这个标题不受影响</h1>
  <p class="center">这个段落居中对齐。</p> 
</body>

也可以是全选元素（用 . 全选）

.center{text-align=center}

【ps】类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

3. CSS 组合和嵌套选择器

组合选择器

h1,h2,p
{
color:green;
}

嵌套（层级）选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

4.伪类选择器

可以增加行为，如selector:hover

5.伪元素选择器

可以增加元素，如selector::before与selector::after

6.选择器权重

id:100
class:10
元素：1
权重大的优先显示
组合选择器看累加权重
权重相同后面覆盖前面
在属性后面加！important设置为最终样式

（三）CSS创建

1.外部样式表< link >

适用：当样式需要应用于很多页面时，可以通过改变一个文件来改变整个站点的外观

用标签link链接外部样式表
link标签在（文档的）头部：

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

【ps】 ①rel（relationship）：规定了当前文档与被链接文档之间的关系。

②type ：规定被链接文档的类型。

2.内部样式表

适用：单个文档多次使用

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

3.内联样式

适用：样式仅需要在一个元素上应用一次时

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

4.多重样式优先级

（内联样式） > （内部样式） >（外部样式） > 浏览器默认样式

**注意：**如果外部样式链接放在内部样式的后面，则外部样式将覆盖内部样式。

（四）盒子模型

CSS box-model

/*html*/
<div class="box">
        <a href="">test</a>
</div>

/*css*/
*{
    margin:0;
    padding:0;		/*取消html元素的默认边距*/
}

.box
{
    width: 100px;
    height: 100px;
  /*  border-width: 10px;
    border-style:solid;
    border-color: red;*/
    border:1px red solid;    /* border的简写 */
    margin: 50px;			/* margin简写顺序：4个值上右下左，2个值分别为上下和左右 */
    padding-left:30px;       /* 元素实际宽度：border-left+border-right+padding-																	left+padding-right */
    padding-top: 50px;
    box-sizing: border-box;	/*防止padding改变盒子的实际大小
}

（五）浮动布局

1.HTML元素的分类

块元素：可以设置宽高，独立成行

如：h1-6, p, div, ul , li
行内元素（内联元素，行级元素）：不可以设置宽高，不独立成行。

如 a, span
行内块元素：可以设置宽高，不独立成行。

如 img, input, button

2.display属性

display属性可以用来转化html元素属性,display:

block:转化为块元素（常用）
inline:行内元素
inline-block:行内块元素
none:隐藏元素

考虑一个问题：

块元素独立成行，如果在网页布局时想让两个div（块元素）在同一行，如何实现?

下面引入浮动属性：float

3.浮动属性

float:left(...)

(36条消息) CSS基础（四）——浮动布局_pro1822的博客-CSDN博客_css浮动布局

使HTML元素脱离文档流，但是不脱离文本流（仍占文本空间）
要消除浮动，可以利用伪元素选择器，在父级容器前后加上**clear:both**属性

（六）CSS定位

1）static:

正常（默认）

2）fixed

固定（参照当前浏览器视窗），不占位，重叠

3）relative

移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素的定位参照是相对其正常位置。
相对定位元素经常被用来作为绝对定位元素的容器块。

4）absolute:

绝对定位的元素的位置相对于最近的已定位父元素
如果元素没有已定位的父元素，那么它的位置相对于< html>:
不占位，重叠

5）sticky

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

特定阈值指的是 top, right, bottom 或 left 之一
换言之，指定 top, right, bottom 或 left 四个阈值其中之一
才可使粘性定位生效。否则其行为与相对定位相同。

重叠的元素
- z-index属性指定了一个元素的堆叠顺序（默认为1）
- 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

（七）样式属性

1）background背景

CSS 属性定义背景效果:

（同为简写的属性顺序）

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

2）文本

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

3）字体

font-family 属性应该设置几个字体名称作为一种"后备"机制

如果浏览器不支持第一种字体，他将尝试下一种字体。
字体大小：
- 绝对大小
- 相对大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
所有CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式（斜体等）
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

4）链接

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

5）列表

ul.a {list-style-type:circle;}
ol.d {list-style-type:lower-alpha;}
list-style-image:url(‘sqpurple.gif’);

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。