文章介绍了CSS的基础知识，包括行内样式、内嵌样式和外部样式的声明方法，以及标签选择器、类选择器和ID选择器的使用。讨论了CSS的优先级规则，并展示了不同选择器的示例。此外，还涵盖了盒模型、文档流的概念，以及浮动和定位在布局中的应用。文章最后提到了一些其他选择器，如伪类选择器，用于链接状态的控制。
1. css:层叠样式表，能给网页设计样式
2. 如何声明css样式？三种样式
- 行内样式：通过标签中使用style属性声明样式(行内代码冗余，维护困难，开发不常用)
- 内嵌样式：通过<style>标签结合选择器声明css样式（style标签通常放在head里面title下面，开发常用）
- 外部样式：通过css文件声明css样式。在html中使用link标签引入css文件（开发常用）
<link rel=“stylesheet” href=“css/index_css.css” />
css中的三大选择器：
- 标签选择器
- 标签名{
属性：值；
}
- 标签名{
- 类选择器(有多个相同元素可以用)
- .类名{
属性：值；
}
- .类名{
- id选择器（唯一，只能用一次）
- #id名{
属性：值；
}
- #id名{
- 优先级：行内样式 > id选择器 > 类选择器 > 标签选择器
<style>
/* 标签选择器 */
input{
background-color: blue;
}
/* 类选择器*/
.c1{
background-color: pink;
}
/* id选择器*/
#t1{
background-color: red;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/index_css.css" />
</head>
<body>
<!-- 行内样式(优先级最高) -->
<input type="text" style="background-color: green;width: 100px;height: 100px;"/>
<!-- 内嵌样式 -->
<input type="text"/>
<input type="text" class="c1"/>
<input type="text" class="c1" id="t1"/>
<!-- 外部样式 -->
<input type="text" id="t2" />
</body>
css常用的属性:
-
width: 100px;
-
height: 100px;
-
background-color: orange;
- 书写方式：
1、直接写颜色的英文名称
2、由一个十六进制符号来定义
3、用rgb(0,0,0)表示 取值范围0~255
- 书写方式：
-
border:边框
- 第一个参数：表示边框的宽度
第二个参数：边框的样式（solid实线，double双线，dashed虚线，dotted点线）
第三个参数：表示边框的颜色
- 第一个参数：表示边框的宽度
-
font-size:文字的大小
-
font-style:定义文字风格，如italic,inherit是从父元素继承字体样式
-
color:文字的颜色
-
font-family:文字的字体
-
font-weight:文字的粗细（100-900逐渐变粗，没有单位）
-
outline:外边线（none表示不设置）
-
text-align:文字对齐方式（left左默认，right右，center）
-
text-decoration:文本修饰属性
- line-through:贯穿线
- overline:上划线
- underline:下划线
- none:无文本修饰
-
line-height:值=行高时，文字垂直居中
-
box-shadow:盒子阴影
- 第一个值：阴影的横坐标（向右为正）
第二个值：阴影的纵坐标(向下为正)
第三个值：虚体阴影的半径
第四个值：实体阴影的半径
第五个值：阴影的颜色
- 第一个值：阴影的横坐标（向右为正）
-
cursor:指针样式（pointer小手 cell加号 text输入的光标 auto默认值浏览器自动识别）
-
opacity:透明度（值是从0到1，逐渐清晰，没有单位）
-
display:改变标签分类
- none:隐藏该元素
- block：块级元素类型
- inline：行内元素类型
- inline-block：行内块
<style>
input{
width: 100px;
height: 100px;
background-color: orange;
border: 10px solid orangered;
font-size: 26px;
color: white;
font-family: "楷体";
font-weight: 600;
border-radius: 60px;/* 文本框宽度是100，左边框10，有边框10，100+10+10/2=60 */
outline: none;
text-align: center;
box-shadow: 10px 10px 150px 70px yellow;
cursor: pointer;
opacity: 0.4;
}
</style>
3、html标签的分类（面试题）
-
块元素:独占一行，可以设置宽和高（宽度默认浏览器宽度，高度默认内容高度）
常见的标签：p div ul ol li h标题 -
行内元素:不独占一行，不能设置宽和高（主要用来包裹文字）
常见标签：a b i span（span标签里放的文字没有任何效果，一般在要单独给文字加样式使用）标签 -
行内块元素:不独占一行，可以设置宽和高
常见标签：input img标签 -
万能块元素：div
-
万能行内元素：span
4、什么是盒子模型？（用来布局）
盒子模型使用div标签定义，可以在盒子模型中装入任何元素。（将页面中的元素看作是盒子）
盒子宽度默认浏览器宽度，盒子高度默认内容高度，没有内容高度0
盒子的组成部分
- 内容区content(通过width和height设定)
- 内边距padding（上右下左、上右下、上右）
- 边框border
- 外边距margin
- 盒子实际大小计算公式：
- 实际宽度：width + 2padding + 2border
- 实际高度：height + 2padding + 2border
- 盒子实际占用空间大小计算公式：
- 实际占用空间宽度：width + 2padding + 2border + 2*margin
盒子模型边距影响方向
- 设置padding的时候，不同数量的数据影响方向分别是什么？（顺时针从上面开始，如果数没有看对面）
- padding内边距:
- 一个值：四周
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左
- 一个值：四周
- padding内边距:
- 设置margin的时候，不同数量的数据影响方向分别是什么？
- margin外边距:
- 一个值：四周
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左
- 一个值：四周
- margin外边距:
浏览器会默认给部分标签设置默认的内外边距，如果想清除默认的可以用全局选择器
<style>
*{
padding:0px;
margin:0px;
margin:0 auto; /* 版心居中，上下是0，左右是auto,auto（自适应，浏览器自动计算） */
}
</style>
- 外边距折叠合并现象：当上盒子设置下边距，下盒子设置上边距时，两个盒子实际间距多少？
都为正数的时候：取最大值（垂直布局的块级元素上下margin会合并）
都是负数的时候：取最小值
一正一负的时候：两个数求和 - 如果想要通过margin和padding改变行内标签的垂直位置无法生效，如span，如果想要改变垂直位置可以使用line-height行高
5、什么是网页文档流？
文档流是HTML元素在网页上的排列方式
所有元素默认都是左上显示，块元素独占一行，行内元素不独占一行这种浏览器默认的排列方式是正常文档流。
修改文档流的属性：
-
display属性：改变标签分类
- block:块级元素
- inline:行内元素
- inline-block:行内块元素
- none:隐藏该元素
-
float布局
-
position属性
- relative
- absolute
- fixed
6、什么是浮动？
浮动是通过float属性声明的，当元素浮动后，会脱离文档流，并且浮动只能在当前行进行左浮动或右浮动
浮动的好处？
1、快速找准盒子
2、当所有盒子都浮动的时候，所有盒子居一行显示
浮动元素的特点：
1、浮动的元素会脱离文档流
2、浮动只能在父元素范围内浮动
3、浮动的元素不会盖住文字，文字会自动产生环绕效果
7、css定位
-
什么是css定位
定位可以改变css中盒子的位置，需要通过position属性开启定位
通过left,right,top,bottom调整具体位置 -
css定位的种类：（面试题）
-
静态定位static：页面所有元素默认的定位方式，无定位的意思
-
相对定位relative：元素在移动时，是相对元素自身原来位置的变化
- 特点：移动后元素原来的位置仍然占有着
-
绝对定位absolute：开启绝对定位的元素会脱离文档流，相对于父元素的位置进行移动
- 特点：如果他没有父元素或者父元素没有定位，则以浏览器为准进行定位；如果父亲有定位爷爷也有定位，则以最近一级带定位的为准；绝对定为不再占有原先的位置
-
固定定位fixed：开启固定定位的元素会脱离文档流，相对于浏览器窗口位置进行移动，并且不会随着窗口的滚动而滚动
/*如果父元素中包含子元素通常设定为"父相子绝" */
-
-
css如何设置定位来改变元素位置
1. 通过position属性开启元素定位
2. 通过left，right，top，bottom属性调整元素位置- 如果同时设置left和right属性，只有left生效
如果同时设置top和bottom属性，只有top生效
如果left是正数，盒子向右，负数向左
如果right是正数，盒子向左…
如果top是正数，盒子向下…
如果bottom是正数，盒子向上… - z-index属性：重叠层（决定哪个元素在上面）
设置重叠层：默认是auto,水平是0，不能加单位，值越大的内容距离水平越远。使用重叠层前要开启定位
- 如果同时设置left和right属性，只有left生效
8、其他选择器:(body默认margin8px)
- 全局选择器： *（一般用于整个页面文字的处理）
- 属性选择器： [属性=值]
- 后代选择器： 选择器 选择器 选择器(选择器可以是三大基本选择器任意一种)
后代选择器不用每一代都要写，只要有后代关系即可 - 子代选择器： 选择器 > 选择器 > 选择器
子代选择器每一代都要写 - 并集选择器: （多选选择器） 选择器，选择器，选择器(重置选择器，可以重置html标签的默认样式)
选中所有选择器选中的元素（通常用于样式设置） - 伪类选择器：
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n)选中第n个元素 - 动态伪类选择器：
a:link 未访问的链接（a是超链接标签）
a:visited 已访问的链接
a:hover 鼠标移动到链接上（鼠标悬停）
a:active 选定的链接
a:hover 必须要置于a:link和a:visited之后才有效
a:active必须置于a:hover之后才有效
/* 全局选择器*/
/* *{
color: #87CEEB;
} */
/* 属性选择器*/
/* [type=text]{
color: red;
} */
/* 后代选择器*/
/* div ul #t1{
color: #0000FF;
}
div ul input{
color: #008000;
} */
/* 子代选择器*/
div > ul > li > input{
color: yellow;
}
/* 并集选择器*/
ul,#t1,.c1{
color: purple;
}
/* 伪类选择器 */
a:link{
background-color: green;
}
a:visited{
background-color: orange;
}
a:hover{
background-color: pink;
}
a:active{
background-color: yellow;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
