项目实训个人任务之css样式其一

引入css文件 

<link>元素允许你指定一个外部CSS文件的路径，这样浏览器就可以加载和应用这些样式到HTML元素上了。

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

或者使用import来进行修正

@import url("./young.css")                                        

CSS选择器

CSS选择器是用于选择你想要样式化的HTML元素的模式。它们定义了哪种HTML元素将受到CSS样式的影响。

常见的css选择器有以下几种：

元素选择器

选择所有指定类型的html元素

p {  
    color: green;  
}

选定所有的标签为p的元素，将它们变成绿色

ID选择器

选择指定ID的HTML元素

#myID {  
    background-color: yellow;  
}

把ID为myID的元素选定，并将背景颜色变成黄色

属性选择器

选择带有指定属性和值的HTML元素

a[target="_blank"] {  
    text-decoration: none;  
}

选择所有target属性值为"_blank"的<a>元素并移除它们的下划线。

类选择器

选择所有带有指定类名的HTML元素

.myClass {  
    font-size: 20px;  
}

选择所有带有class="myClass"属性的HTML元素并将它们的字体大小设置为20像素。

css初始化

在CSS中，初始化（也称为重置或标准化）是一个常见的做法，用于消除不同浏览器之间的默认样式差异，确保页面在不同浏览器上看起来尽可能一致。这通常涉及到设置一些常见的HTML元素的默认样式为统一的、无样式（或基础样式）的状态。

以下是一个简单的CSS初始化示例

*,  
*::before,  
*::after {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box; 
}  
  
ul, ol, dl {  
  list-style: none;  
}  
  
a {  
  text-decoration: none;  
  color: inherit;   
}  
  
table {  
  border-collapse: collapse; 
  border-spacing: 0;
}  
  
body {  
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
  font-size: 16px;   
  line-height: 1.5; 
  color: #333;   
}  
  
/* 其他可能的初始化... */  
/* 例如，设置输入框样式、按钮样式等 */  

当我们要使用这个css初始化时，可以将其作为一个css文件保存下来，并通过在html的head中引入来使用