前端第二天 CSS入门

最新推荐文章于 2024-07-24 23:00:08 发布

wjjtc25

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量103

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_51508444/article/details/128742971

版权

1. CSS基本使用

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

样式格式书写

紧凑格式
```
h3 { color: deeppink;font-size: 20px;}
```
展开格式
```
h3 {
color: pink;
font-size: 20px;
}
```

如果有多条声明建议使用第二种格式特别直观

引入css样式表

行内样式表（行内式）

<div class="blue" style="color: #3dfff0;font-size: 20px"> div2 </div>

内部样式表（嵌入式）可以放在html文档的任何位置但一般放在head标签内
```
<style>
   div {
     color: red;
     font-size: 12px;
 }
</style>
```
外部样式表（链接式）放在head标签内
```
<link rel="stylesheet" href="css文件路径">
```
stylesheet表示被链接的文档是一个样式表 href则表示样式表的路径

2. CSS选择器

2.1 标签选择器

先在html定义一个div

<div> 变红色 </div>

它在浏览器中运行是

div {
    color: red;
}

它会使所有div标签的文字颜色变成红色

2.2 类选择器

在第一天中我们知道html所有标签都有一个共同的属性class属性用css可以通过选中这个属性来更改html元素的样式。他的语法格式是.加上class名字

.red {
 color: red;
}

它表明让所有类名为red的元素文字颜色变成红色

<div class=‘red’> div1 </div>
<div class=‘blue’> div2 </div>
<div class=‘red’> div3 </div>

2.3 ID选择器

在html中每个元素都可以设置专属的id属性 css可以选择这个id来设置元素的样式语法格式是

<style>
     .red{
      color: red;
    }
    #header1 {
      color: aqua;
    }
 </style>

<body>
<div class="red" id="header1"> div1 </div>
<div class="blue"> div2 </div>
<div class="red"> div3 </div>
</body>
</html>

在浏览器中的运行结果是

2.4 通配符选择器

* {
    color:red;
}

选择所有的标签。一般不使用。

2.5 后代选择器

后代选择器 又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

2.6 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

html代码是

<div>
    <p>
        这是div的儿子(属于p)
        <span>这是div的孙子(属于span)</span> 
    </p>
</div>

选择的是p标签元素不选择span元素

2.7 并集选择器

通过名字可以知道就是选择多个元素它的语法格式是

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

2.8 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

/* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
a:link {
    color: grey;
    text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
    color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
    color: red;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
    color: green;
}

这一段第3个代码的意思是当鼠标不经过链接时文字是灰色的当鼠标经过链接文件由灰色变成红色

2.9 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {
background-color:red;
}

2.10 小结

一般来说这些选择器的优先级是

id选择器(#myid)
类选择器(.myclassname)
标签选择器(div,h1,p)
子选择器(ul < li)
后代选择器(li a)
伪类选择(a:hover,li:nth-child)

3. CSS字体

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

3.1 字体系列

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
首先选择第一个若电脑不支持则选择第二个以此类推

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

p { 
 font-size: 20px; 
}

不同浏览器的默认字体大小不同所以尽量不使用默认大小的字体

3.3 字体粗细

CSS 使用 font-weight 属性定义字体大小。

p {
    font-weight: 400;
}

属性	描述
normal	默认
bold	加粗
100-900	400相当于默认 700相当于加粗

3.4 字体样式

CSS 使用 font-style 属性设置风格。

p { 
 font-style: normal;    /*italic表示斜体 normal表示正常*/
}

3.5 行高

CSS使用 line-height 属性设置行高

p {
    line-height: 30;
}

Tip:当div的高度等于行高时文字便会处于中间。

3.6 连写

body { 
 font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

4. CSS文本

4.1 文本颜色

div { 
 color: red;
}

颜色名 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

4.2 对齐方式

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}  /*文本向中间 左边 右边对齐*/

img.top {    /*图片向上 向中间 向下对齐*/
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

4.3 装饰文本

h1 {
  text-decoration: overline;  /*上划线*/
}

h2 {
  text-decoration: line-through;    /*删除线*/
}

h3 {
  text-decoration: underline;    /*下划线*/
}
h4 {
    text-decoration: none;    /*啥都没有*/
}

4.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

h1 {
  text-indent: 3px;    /*首行缩进3个像素*/
}

h2 {
  text-indent: 2em;     /*首行缩进2个字符*/
}


/*字母之间的间距*/

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

4.5 文本转换

p.uppercase {
  text-transform: uppercase;     /*大写*/
}

p.lowercase {
  text-transform: lowercase;    /*小写*/
}

p.capitalize {
  text-transform: capitalize;    /*单词首字母大写*/
}

4.6 文本阴影

h1 {
  text-shadow: 2px 2px 5px red; /*水平阴影 垂直阴影 向阴影添加模糊效果 阴影颜色*/
}

5. 元素显示模式

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

6. CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

属性	取值
background-color	transparent; 颜色值
background-image	none \| url (url)
background-repeat	repeat \| no-repeat \| repeat-x \| repeat-y
background-position	x y; /方位词或者像素都可以/
background-attachment	scroll \| fixed /第一个背景随着内容滚动第二个固定/