CSS内容学习整理

最新推荐文章于 2025-02-21 09:31:02 发布

ymj960722

最新推荐文章于 2025-02-21 09:31:02 发布

阅读量336

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/ymj960722/article/details/106750305

版权

CSS内容学习整理

CSS是层叠样式表，英文全称：Cascading Style Sheets
CSS样式分为：内部样式、外部样式、行内样式

内部样式：

<head>
  <meta charset="UTF-8">
  <title>css test page</title>
  <style type="text/css">
    p{
      background-color:#ff0000;
      font-size:30px;
    }
  </style>
</head>

外部样式：

<head>
  <meta charset="UTF-8">
  <title>css test page2</title>
  <link rel="stylesheet"type="text/css"href="css/demo2.css">
</head>

行内样式：

<body>
  <p style="background-color:green;font-size:100px">
    https://www.dodoke.com</p>
  <p>渡课官网</p>
</body>

CSS常用选择器

标签选择器

p{
    background-color: #f2f2f2;
    font-size: 40px;
  }
<p>渡课官网</p>

类选择器

.p2{
font-size:50px;
font-family:黑体;
}
<p class="p2">渡课官网</p>

背景设置

background-color 颜色值设置背景颜色
background-image 图片作为背景图片的位置
background-repeat repeat重复；repeat-x横向重复；repeat-y纵向重复；no-repeat不重复
background-attachment scroll背景图片随着文字一起滚fixed文字滚动背景图片不随着滚动
background-position 背景图像的起始位置 top left，top center，cop right；center
left；center right，bottom left，bottom center，bottom right

CSS常用样式

颜色设置：

color 单词、十六进制、rgb(x,x,x)
文本样式：

color 文本颜色
direction ltr rtl 文本的书写的方向
letter-spacing npx 字符间距
line-height npx 行高（行间距）
text-align left（靠左）,right（靠右）,center（居中）,justify（两端对齐）

注意点：

direction:ltr 和 text-align:justify的区别：
对于字母和汉字，两者效果相同；
对于阿拉伯数字来说，两者不同；
对于direction来说：改变数字书写顺序，改变小数点显示顺序
Itr rtl 改变的不是顺序，而是书写的顺序，从右往左写的

文本修饰：

text-decoration 文本的下划线
none（无）,underline（下划线）,overline（上划线）,line-through（字中间线）
text-shadow 文本设置阴影
h-shadow v-shadow blur color（同时存在，直接写数据即可）
text-transform 改变字母大小写
none（无）,capitalize（首字母大写，对文字无变化）,uppercase（全部大写）,lowercase（全部小写）
text-indent 首行缩进
npx,nem （em 是字符单位，2em表示两个字符，可以设置小数点字符如：2.2em）

字体样式：

作用：定义文本的字体系列，大小，加粗，风格，变形等。

font-family 设置字体（宋体，楷体等）
font-style 规定斜体的文本
normal（正常的） italic（大多数斜体，个别不斜体）oblique（所有都斜体）
font-weight 文本加粗 normal（正常的） bold（加粗） 100-900（由于浏览器差异问题，基本不用）
font-size 字体大小 npx
列表样式：
list-style-type 设置列表项目的外观
list-style-position 列表符号的位置
list-style-image 把图片设置为列表项目的标记
list-style 简写属性，涵盖以上三种样式属性

伪类：

伪类分为：状态性伪类和结构性伪类。

状态性伪类:

a:link 未访问的链接
a:visited 已经访问过的链接
a:hover 鼠标移动到连接上（浮动，悬停）
a:active 向被激活元素添加样式
:focus 选择拥有键盘输入焦点的元素

结构性伪类：

:first-child 选择元素的第一个子元素
:last-child 选择某个元素的最后一个子元素
:nth-child(n) 选择某个元素的一个或者多个特定的子元素
:nth-last-child(n) 选择某个元素的一个或者多个特定的子元素，从这个元素的最后一个子元素开始
:first-of-type 选择一个上级元素的第一个同类子元素

伪元素选择器：

伪类选择器是选择一整行（列）进行设置，而伪元素选择器是选择其中一段或者一行数字进行设置。

::selection 选择指定元素中被用户选中的内容
::before 在内容之前插入新内容
::after 在内容之后插入新内容
::first-line 指定选择器的首行
::first-letter 选择文本的第一个字符

CSS其他选择器：

id   #    选择指定元素中被用户选中的内容
通配符     *
逗号选择器    ，    联合选择器
空格选择器           子孙后代选择器
>选择器        >     子选择器
+选择器        +      同辈选择器   
[]选择器        []       属性选择器

CSS浮动：

div样式设置：

div{
  background-color:red;
  width:100px;
  height:100px;
  position:absolute;
  top:200px;
  left:200px;}

overflow设置：

visible 默认值，内容不会被修剪，会呈现在元素框之外
hidden 超出的部分进行隐藏
scroll 不论是否需要，都显示滚动条
auto 按需显示滚动条以便查看其余内容

outline设置：

作用：绘制于元素周围的一条线，位于边框外缘的外围，可以起到突出元素的作用。

dashed 虚线轮廓
dotted 点状轮廓
solid 实线轮廓
double 双线轮廓
none 无轮廓

border设置：

作用：设置div边框的边线宽度，颜色，虚线，实线等样式。
border-left border-right border-top border-bottom

solid 设置下边框为实线
none 无边框
double 双线边框

box-sizing设置：

box-sizing——padding多出的部分由哪里产生的

content-box 在宽度和高度之外绘制元素的内边距和边框默认溢出的效果
border-box 已设定的宽度和高度分别减去边框和内边距才能得到内容的高度和宽度

float设置：

left 元素向左浮动
right 元素向右浮动
none 默认值，不浮动

脱标流：

在这里插入图片描述

/*脱标流设置*/
  <div id="div1">框框1</div>
  <div id="div2">框框2</div>
  <div id="div3">框框3</div>
/*设置属性*/
#div1{
  background-color:red;
  float:left;
}
#div2{
  background-color:green;
  float: left;
}
#div3{
  background-color:blue;
  float: left;
}

清除浮动：

为了父元素不会出现“高度崩塌”
如果强制规定外层容器的尺寸，则会显得不那么灵活，高度不能自动适应了
从某个元素开始，就不会再需要浮动效果了

/*清除浮动的规范写法*/
#cleardiv:after{
/*设置内容为空，content框架存在，但内容可以为空*/
  content:"";
/*设置为隐藏，与上面的content是一组操作*/
  visibility:hidden;
/*设置行高为0px*/
  height:0px;
/*显示为块状元素*/
  display:block;
/*最后进行清除*/
  clear:both;
}
#cleardiv{
/*执行远离：使得页面里面的对象重新加载，重新计算*/
  zoom:1;}
/*IE浏览器专用的——外边距重叠或者浮动不能清除*/