CS S相关

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量241

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_62272971/article/details/127966138

版权

CSS

概述

CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。

如果说，HTML是网页的"素颜"，那么CSS就是页面的"美妆师"，它就是让网页的外观更漂亮！

CSS的组成

CSS是一门基于规则的语言 — 你能定义用于你的网页中特定元素的一组样式规则

选择器：指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。
声明：形式为属性(property):值(value)，用于设置特定元素的属性信息。
- 属性：指示文体特征，例如font-size，width，background-color。
- 值：每个指定的属性都有一个值，该值指示您如何更改这些样式。

格式：

选择器 {
    属性名:属性值;//冒号之前是属性，冒号之后是值。
    属性名:属性值;
    属性名:属性值;
}

基本语法

引入方式

1.内联样式
内联样式是CSS声明在元素的style属性中，仅影响一个元素：

格式：<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>

2.内部样式表
内部样式表是将CSS样式放在style标签中，通常style标签编写在HTML 的head标签内部。

<head>
    <style>
        选择器 {
            属性名: 属性值;
            属性名: 属性值;
        }
    </style>
</head>

3.外部样式表
外部样式表是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它，通常link标签编写在HTML 的head标签内部。

<link rel="stylesheet" href="css文件">

rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入css文件固定值为stylesheet。

href：属性需要引用某文件系统中的一个文件。

注释

CSS中的注释以/*和开头*/。

/*注释*/

选择器

为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素

选择器的分类：

分类	名称	符号	作用	示例
基本选择器	元素选择器	标签名	基于标签名匹配元素	div{ }
	类选择器	`.`	基于class属性值匹配元素	.center{ }
	ID选择器	`#`	基于id属性值匹配元素	#username{ }
属性选择器	属性选择器	`[]`	基于某属性匹配元素	[type]{ }
伪类选择器	伪类选择器	`:`	用于向某些选择器添加特殊的效果	a : hover{ }
组合选择器	后代选择器	`空格`	使用`空格符号`结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素	.top li{ }
	子级选择器	`>`	使用 `>` 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素	.top > li{ }
	同级选择器	`~`	使用 `~` 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素	.l1 ~ li{ }
	相邻选择器	`+`	使用 `+` 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素	.l1 + li{ }
	通用选择器	`*`	匹配文档中的所有内容	*{ }

基本选择器

元素选择器

页面元素

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

选择器

选择所有li标签,背景变成蓝色
li{
    background-color: aqua;
}

类选择器

页面元素

<div>
    <ul>
        <li class="ulist l1">List item 1</li>
        <li class="l2">List item 2</li>
        <li class="l3">List item 3</li>
    </ul>
    <ol>
        <!--class 为两个值-->
        <li class="olist l1">List item 1</li>
        <li class="olist l2">List item 2</li>
        <li class="olist l3">List item 3</li>
    </ol>
</div>

选择器

选择class属性值为l2的,背景变成蓝色
.l2{
    background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
   color: wheat;
}

ID选择器

页面元素

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器

#tow{
    background-color: aqua;
}

通用选择器

页面元素

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器

所有标签 
*{
    background-color: aqua;
}

属性选择器

页面元素

   <ul class="l1">
        <li  >List item 1</li>
        <li  >List item 2</li>
        <li  >List item 3</li>
    </ul>
    <ul class="l2">
        <li  id="four">List item 1</li>
        <li  id="five">List item 2</li>
        <li  id="six">List item 3</li>
    </ul>

    <p class="">
        p item
    </p>

选择器

[属性名]{ }

标签名[属性名]{ }

标签名[属性名='属性值']{ }

伪类选择器

伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。

格式：

标签名:伪类名{ }

常用伪类:

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

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

注意：伪类顺序 link ，visited，hover，active，否则有可能失效。

示例：

HTML 代码 ： 
<div>
    <a class="red" href="http://www.itheima.com">黑马</a> <br/>
    <a class="blue" href="http://www.itheima.com">传智</a>
</div>


CSS 代码 ： 
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {
    color: red;
}

组合选择器

页面元素

<div>
    <ul class="l1">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <ul class="l2">
            <li id="four">List item 1</li>
            <li id="five">List item 2</li>
            <li id="six">List item 3</li>
        </ul>
    </ul>
</div>

后代选择器

.l1 li{
    background-color: aqua;
}

子级选择器

.l1 > li{
    background-color: aqua;
}

同级选择器

.l1 ~ li{
    background-color: aqua;
}

相邻选择器

.l1 + li{
    background-color: aqua;
}

语义化标签

标签	名称	作用	备注
header	标头元素	表示内容的介绍	块元素，文档中可以定义多个
nav	导航元素	表示导航链接	常见于网站的菜单，目录和索引等，可以嵌套在header中
article	文章元素	表示独立内容区域	标签定义的内容本身必须是有意义且必须独立于文档的其他部分
footer	页脚元素	表示页面的底部	块元素，文档中可以定义多个

在这里插入图片描述

常见样式属性

其他属性：

分类	属性名	作用
边框	border	边框
	border-top	底部边框
	border-radius	设置边框圆角
文本	color	颜色
	font-family	字体样式
	font-size	字体大小
	text-decoration	下划线
	text-align	文本水平对齐
	line-height	行高，行间距
	vertical-align	文本垂直对齐

Table标签

标签名	作用	备注
table	表示表格，是数据单元的行和列的两维表	容器，默认无样式
tr	table row，表示表中单元的行
td	table data，表示表中一个单元格
th	table header，表格单元格的表头，通常字体样式加粗居中

<table>
    <tr>
        <th rowspan="2">GROUP</th>
        <th colspan="2"> name</th>
    </tr>
    <tr>
        <th>First name</th>
        <th>Last name</th>
    </tr>
    <tr>
        <td rowspan="2">G1</td>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
    </tr>

    <tr>
        <td rowspan="3">G2</td>
        <td>Aohn</td>
        <td>Doa</td>
    </tr>
    <tr>
        <td>Bane</td>
        <td>Dob</td>
    </tr>
    <tr>
        <td>Cane</td>
        <td>Doc</td>
    </tr>
</table>

在这里插入图片描述

标签名	作用	备注
thead	定义表格的列头的行	一个表格中仅有一个
tbody	定义表格的主体	用来封装一组表行（tr元素）
tfoot	定义表格的各列汇总行	一个表格中仅有一个

常见样式属性

背景

背景色
background-color属性定义CSS中任何元素的背景色。

背景图
background-image属性允许在元素的背景中显示图像。使用url函数指定图片路径。

控制背景重复
background-repeat属性用于控制图像的平铺行为

no-repeat -停止完全重复背景。
repeat-x —水平重复。
repeat-y —反复重复。
repeat—默认值；双向重复。

轮廓

轮廓outline：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

显示

display属性，用来设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。

元素显示

/*   把列表项显示为内联元素，无长宽*/
li {display:inline;}
/*   把span元素作为块元素，有换行*/
span {display:block;}
/*   行内块元素，结合的行内和块级的优点，既可以行内显示，又可以设置长宽，*/
li {display:inline-block;}

元素隐藏
当设置为none时，可以隐藏元素。


  li {
            display: none;
           
  }

盒子模型

万物皆"盒子"。盒子模型是通过设置元素框与元素内容和外部元素的边距，而进行布局的方式。
在这里插入图片描述

- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。

外边距

margin-top
margin-right
margin-bottom
margin-left

内边距

padding-top
padding-right
padding-bottom
padding-left
``	`

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CS S相关

CSS(层叠样式表——Cascading Style Sheets，缩写为CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。如果说，HTML是网页的"素颜"，那么CSS就是页面的"美妆师"，它就是让网页的外观更漂亮！
复制链接

扫一扫