css基础

最新推荐文章于 2023-08-18 20:40:23 发布

Chenyang_lm

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量115

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Chenyang_lm/article/details/120242570

版权

笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的三种导入方式：行内样式、内部样式和外部样式，以及各自的优缺点和使用场景。接着阐述了CSS的基本语法和选择器的种类，包括通配符选择器、元素选择器、类选择器、ID选择器以及属性选择器。此外，还讨论了复合选择器、伪类选择器和盒子模型的概念。文章最后提到了一些关键的CSS属性，如边框、内边距、外边距以及浮动、定位、弹性布局等，为理解和使用CSS提供了全面的知识框架。

摘要由CSDN通过智能技术生成

1.css的三种导入方式：
① 行内样式
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style=”样式属性名：样式属性值；…”></标签名>
② 内部样式
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
      <style type=”text/css”>				
        选择器 { 样式属性名 : 样式属性值; …}	
      </style>		
</head>

③ 外部样式
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
第一种：
<link type=”text/css” href=”外部css文件所在位置路径”/>
第二种：

<head>
    <style type=”text/css”>							
        @import ”外部css文件所在位置路径”						
    </style>				

</head>

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）

内部样式表
部分结构和样式相分离
没有彻底分离
较多
控制一个页面（中）

外部样式表
完全实现结构和样式相分离
需要引入
最多，强烈推荐
控制整个站点（多）

2.css的基本语法：
选择器 {样式属性名：样式属性值；}
3. 基本选择器：
① 通配符选择器（*）选中HTML文档中的所有元素常用来清除所有默认样式： * {margin:0; padding:0;}
② 元素选择器/标签选择器通过标签名选中元素

html： <div>123</div>
css：  div {background-color : red;}

③ 类选择器（.）通过类名（class属性的值）选中元素

html： <div class=”box”>123</div>
css：  .box { background-color : red;}

④ id选择器（#）通过id名选中元素（唯一）

html： <div id=”a”>123</div>
css：  #a { background-color : red;}

属性选择器：通过标签的属性来选中页面中的某个元素
① p[title] {…} 选中p标签且拥有title属性
② p[title = ”abc”] {…} 选中p标签且拥有title属性且 title属性的值为abc5. 复合选择器：
① 后代选择器 div p {…}
选中div元素下的所有p元素
② 子元素选择器 div > p {…} 选中div元素下的第一级p元素（必须是父子关系）
伪类选择器：
伪选择器:它允许给html不存在的标签（标签的某种状态）设置样式。
① :link a:link {…} 向未被访问的链接添加样式
② :hover a:hover {…} 向鼠标悬停在上方的元素添加样式
③ :active a:active {…} 向被激活的元素添加样式
④ :visited a:visited {…} 向已被访问过的链接添加样式
⑤ :first-child div:first-child {…} 选中div下的第一个子元素
⑥ :before p:before {content:”添加内容”;} 向p元素之前添加内容
⑦ :after p:after {content:”添加内容”;} 向p元素之后添加内容
CSS盒子模型：
包含内容（content）、内边距（padding）、边框（border）、外边距（margin）
四个方位单词：上(top)、下(bottom)、左(left)、右(right)
（1）边框
① 边框的复合属性：border，有三个值（边框颜色、边框样式、边框宽度），三个值的顺序可变，两个值之间用空格隔开，例如：border:1px solid red；
② 三个值中边框样式必须要写，颜色和宽度可以省略
③ 边框样式：none(取消边框) \ dotted(点状线) \ dashed(虚线) \ solid(实线) \ double(双线边)
④ 可以针对某一个方位单独设置边框样式，例如设置左边框：border-left: 1px solid red；
（2）内边距
① 内边距的复合属性：padding
padding只有一个值(如：padding:10px;)，代表盒子的上下左右内边距都是10px；
padding有两个值(如：padding:10px 20px;)，代表盒子的上下内边距是10px，左右时20px；
padding有三个值(如：padding:10px 20px 30px;)，上内边距10px,左右内边距20px,下内边距30px;
padding有四个值(如：padding:10px 20px 30px 40px;)，上内边距10px,右内边距20px,
下内边距30px,左内边距40px;
② 可针对某一方位单独设置内边距，例如设置下内边距：padding-bottom: 10px;
（3）外边距
① 外边距的复合属性：margin
（与内边距完全相同，不再赘述）
外轮廓属性：
① 外轮廓的复合属性：outline，有三个值（外轮廓颜色、样式、宽度），三个值的顺序可变，两个值之间用空格隔开，例如：outline:1px solid red；
② 三个值中外轮廓样式必须要写，颜色和宽度可以省略
③ 外轮廓样式：none(取消外轮廓线)\dotted(点状线)\dashed(虚线)\solid(实线)\double(双线边)
元素类型转换属性：
① 块级元素：一行显示一个，可以设置宽高
② 行内元素：一行显示多个，宽高由内容决定
③ 行内款元素：一行显示多个，可以设置宽高
④ 元素类型转换属性：display none(隐藏元素) \ block(转换成块级元素) \
inline(转换成行内元素) \ inline-block(转换成行内款元素)等
浮动属性：
① 属性名：float
② 属性值：left(向左浮动) \ right(向右浮动)
③ 作用：浮动后都被当成块级元素处理，并且可以使块状元素同行显示
④ 清除浮动：clear:both;
overflow：
① 作用：内容溢出时的显示方式
② overflow visible(超出部分显示在元素外) \hidden(溢出隐藏)\scroll(设置一直显示滚动条)
\auto(如果内容溢出就自动添加滚动条)
定位属性：
① position 定位类型：absolute(绝对定位) \ relative(相对定位)
② 定位位置由top、bottom、left、right四个方位单词决定
③ 在绝对定位模式下，可以使用z-index属性改变层级关系，z-index的值越大所在层级越高
弹性布局：
① 设置弹性布局的方法，为父盒子添加：display:flex;
② 元素排列方式：justify-content：center(元素居中排列) \ flex-start(元素由左开始排列) \
flex-end(元素由右开始排列) \ space-between(元素由左右两端开始排列) \
space-around(每个元素两侧的间隔相等)
③ flex:1; 代表平均分配元素