基础CSS

从头再来好好学习

已于 2023-01-09 20:04:20 修改

阅读量72

点赞数

文章标签： css css3 html

于 2023-01-07 14:53:32 首次发布

本文链接：https://blog.csdn.net/qq_40236618/article/details/128588781

版权

基于freecodecamp和菜鸟教程学习总结

CSS负责告诉浏览器如何展示你的网页。你可以使用CSS设置HTML元素的颜色、字体、大小等属性

选择器

element选择器：选择指定元素名称的所有元素
class选择器：类选择器，用前面带有一个点的名称定义，点后面的名称是元素class属性的值
属性选择器：该选择器无需使用class或id的形式，input[type=“text”]

/* comment here */

CSS中的注释

link

该元素定义文档与外部资源的关系，最常见的用途是链接样式表，是自闭合标签

href：URL，指示被链接文档的位置
rel：必需。该属性定义当前文档与被链接文档之间的关系，常用stylesheet

style

该元素定义HTML文档的样式信息

font-family：该属性指定一个元素的字体，使其看起来与浏览器的默认字体不同，如sans-serif是一种常见的字体。可以设置多个值，用逗号隔开，作为后备字体
font-style：该属性指定文本的字体样式，设置为italic时为斜体
font-size：该属性用于设置字体大小
text-align：该属性设置元素文本的水平对齐方式，值为center时使元素居中
color：该属性的指定文本的颜色。还可以设置锚点元素的color，使得无论是否访问过链接，颜色都相同
background-color：该属性设置一个元素的背景颜色
background-image ：该属性设置一个元素的背景图像，默认情况下放在元素左上角，url(“URL”)
border-color：设置一个元素的四个边框颜色
width：设置元素的宽度，px是以像素为单位，%则是设置元素为其父元素宽度的比例
height：设置元素的高度
max-width：该属性设置元素的最大宽度
margin-left：该属性设置元素的左边距，可通过设置margin-left和margin-right的值为auto来使元素水平居中
padding：该属性是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距
padding-left：该属性设置一个元素的左填充（空格）
padding-top：该属性设置一个元素的顶部填充（空格）

链接的不同状态

可以通过不同的选择器方法设置锚点元素在不同状态下的属性样式

a:hover{}：鼠标悬停在链接上
a:active{}：链接被实际点击时
a:visited{}：链接已经被实际访问

div

该元素定义HTML文档中的一个分隔区块或者一个区域部分，主要用于布局网页，默认情况下，浏览器通常会在div元素前后放置一个换行符，但可以通过使用CSS来改变
div元素的display属性默认为block。因此当两个block元素彼此相邻时，它们会像实际的块一样堆叠，即不在同一行，要想将两个div元素放置在同一行，需要将它们的display属性设置为inline-block

class

该属性定义元素的类名，通常用于指向样式表的类

article

该元素定义独立的内容，通常包含多个具有相关信息的元素

块级元素和行内元素

块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性来调整这个矩形
行内元素：有自己的独立空间，它是依附于块级元素存在的，因此，对高度、宽度、内外边距等属性的设置是无效的

display

该属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局

block：块级元素
inline-block：行内块元素

<!--index.html-->
<article class="item">
  <p class="flavor">French Vanilla</p>
  <p class="price">3.00</p>
</article>

上面代码，p元素嵌套在具有item类属性的article元素中，可以使用名为item的class为嵌套在元素中任何位置的所有p元素设置样式

.item p{
	display:inline-block;
}

效果如下，两个p元素放在了同一行
在这里插入图片描述

margin&padding

在这里插入图片描述