CSS样式

深巷的猫~

已于 2024-01-24 16:29:36 修改

阅读量496

点赞数

分类专栏：前端技术文章标签： css 前端

于 2020-05-13 20:37:02 首次发布

本文链接：https://blog.csdn.net/weixin_44495678/article/details/103690887

版权

前端技术专栏收录该内容

10 篇文章 2 订阅

订阅专栏

一.CSS

CSS指层叠式表，组成成分；
选择器: 改变样式的HTML元素；
一条或多条声明:每条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号（：）分开。

1.CSS样式
（1）行内样式，内联样式表，只适合应用于一个页面。

<div style=”roder:1px soild black”>这是一个ID</div>

（2）通过 style标签定义内部样式表。
（3）外部样式表，多个页面可使用同一个样式表可以使用外部样式表来导入，通过标签，对页面进行渲染,如：

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

样式优先级规则

1、行内样式优先级最高，内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的，简称后来者居上。
2、同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的，简称后来者居上。

（4）CSS语法规范

CSS语法由两部分组成。
选择器：找到要添加样式的元素。
声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值。

2、CSS选择器

CSS选择器，用于选择需要添加样式的html元素，即在html中引入样式的不同形式。
基本选择器包括：通配选择器、元素选择器、类选择器、id选择器。

（1）通配选择器
作用：可以选中所有的HTML元素。
语法

   * {
       属性名:属性值；
   }

（2）元素选择器
作用：为页面中某种元素统一设置样式。
语法

   标签名 {
       属性名:属性值；
   }

（3）类选择器
作用：根据元素的class值，来选中某些元素。
语法

   .类名 {
       属性名:属性值；
   }

（4）id选择器
作用：根据元素的id属性值，来准确的选中某个元素。
语法

   #id值 {
       属性名:属性值；
   }

注意

1、id属性值：尽量由字母、数字、下划线、短杠组成，最好以字母开头、不要包含空格、区分大小写。
2、一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
3、一个元素可以同时拥有id和class属性。

（5）交集选择器
作用：选中同时符合多个条件的元素。交集有并且的含义（即…又…）
语法：选择器1选择器2选择器3…选择器n{}
注意

1.有标签名，标签名必须写在前面。
2.id选择器、理论上可以作为交集的条件，但实际应用中几乎不用。
3.交集选择器中不可能出现两个元素选择器，因为一个元素，不可能既是p元素又是span元素。
4.用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.类名。

（6）并集选择器
作用：选中多个选择器对应的元素，又称：分组选择器。并集就是或者的含义（要么…要么…）
语法：选择器1，选择器2，选择器…选择器n{}
注意

1.并集选择器，一般竖着写。
2.任何形式的选择器，都可以作为并集选择器的一部分。
3.并集选择器，通常用于集体声明，可以缩小样式表面积。

（7）后代选择器
作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 …选择器n{} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为：”xxx中的“，其实就是后代的意思。
选择器1234…n，可以是任何一种选择器。

（1）字体
font-family：定义字体的类型，如 font-family=“微软雅黑”
font-size：定义字体的大小
font-style：定义字体的风格
（2）文本
①文本基本属性设置
color:字本颜色
text-align:字本对齐方式
letter-spacing:定义字符间隔
world-spacing:定义字间隔
text-decoration:underline：字体带下划线
text-indent: 2em;文本前空两格
②文本溢出，当文本超过限定宽度或字体个数时，就用省略号表示
CSS Overflow属性用来控制内容溢出元素框时显示的方式，overflow: scroll;此修饰内容以滚动条方式垂直滚动
a、HTML部分

<div class="myTit">在很久很久以前，有一个古老又神秘的家族，他们有雪白的羽毛，无翅而能在空中飞翔.在很久很久以前，有一个个古老又神秘的家族，他们有雪白的羽毛，无翅而能在空中飞翔</div>

b、CSS部分

.myTit{
	width: 260px;
	padding-top: 6px;
	padding-bottom: 6px;
	float: left;
	overflow: hidden;          /* 超出的文本隐藏 */
	text-overflow: ellipsis;   /* 溢出用省略号显示 */
	white-space: nowrap;       /* 溢出不换行 */
}

c、Javascript部分

$(".myTit").each(function(){
       var len=$(this).text().length;   //当前HTML对象text的长度
       if(len>30){
           var str="";
           str=$(this).text().substring(0,30)+"......";  //使用字符串截取，获取前30个字符，多余的字符使用“......”代替
           $(this).html(str);                   //将替换的值赋值给当前对象
       }
    });

（3）背景
background-position:定义背景图片的起始位置
background-repeat:定义背景图片是否及如何重复
（4）分类
分类属性允许你控制如何显示元素，设置图像显示于另一个元素的何处，相对于其正常位置来定位元素，使其绝对值来定位元素，以及元素的可见度
clear:设置一个元素的侧面是否允许其他的浮动元素
folat:定义元素在哪个方向浮动
cursor:当指向某元素之上时显示的指针类型
display:定义是否以及如何显示元素
visibility:定义元素是否可见或不可见
（5）列表、表格、轮廓、定位等，需要时再查看详细内容
（6）超链接a标签
如何取掉a标签下划线

a{
text-decoration:none;
}

（7）隐藏

style="display: none;"

5、盒子模型
规定了元素框处理元素内容，如内边距（padding）、边框(border)、外边距（margin）
在这里插入图片描述
6、边框属性
（1）边框样式
border-style->none：默认无边框；dotted:定义一个点线边框；
dashed：定义一个虚线边框；soild：定义实线边框
border-color:定义边框颜色
格式如下：
border-style：属性1，属性2，属性3，属性4，分别对应上，右，下，左；
order-style：属性1，属性2，属性3，分别对应上，左右，下
order-style：属性1，属性2，分别对应上下，左右
order-style：属性1，说明上下左右属性相同
7、list属性
（1）list-style-image 属性，指定列表中的列表项标记的头像，如下所示：
ul
{
list-style-image:url(‘sqpurple.gif’);
}
（2）list-style-position属性，规定列表中列表项目标记的位置，如下所示：
ul {
list-style-position: inside;
}
Inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside：默认值，保持标记于文本的左侧
在这里插入图片描述
（3）list-style-type属性，设置一些不同的样式列表
none：无标记；disc：默认标记是心圆等
（4）如何将列表元素水平显示：display:inline;
8、其他属性
（1）Display(显示) 与 Visibility（可见性）
Display属性一个元素应如何显示，Visibility指定一个元素应可见还是隐藏
隐藏元素: display:none或visibility:hidden
如：h1.hidden {visibility:hidden;}或h1.hidden {display:none;}
(2)Position（定位）
属性对应的5个值，分别为：
①static定位，静态定位不会受到top,bottom,left和right的影响，如div.static（类名）{…}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>static定位</title>
<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<div class="static">
该元素使用了 position: static;
</div>

</body>
</html>

②fixed定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动它也不会移动，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>fixed定位</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

③relative定位，相对定位元素的定位是相对其正常位置，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>relative定位</title> 
<style>
h2.pos_left
{
	position:relative;
	left:-20px;   //样式 "left:-20px" 从元素的原始左侧位置减去 20 像素
}

h2.pos_right
{
	position:relative;
	left:20px;    //样式 "left:20px" 向元素的原始左侧位置增加 20 像素
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</body>
</html>

④absolute定位，绝对定位的元素相对于最近的已定位父元素，如果元素没有已定父元素，那么它的位置相对于，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>absolute定位</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>

⑤sticky定位，基于用户的滚定位置来定位，即其他位置滚动而它不动；如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

（3）float浮动
清除浮动使用clear如下所示：
.text_line
{
clear:both;
margin-bottom:2px;
}
（4）布局-水平&垂直对齐
元素或图片居中对齐：margin: auto;
文本居中对齐：text-align:center;
左右对齐可利用float、margin或padding对应属性设置
垂直居中对齐，使用padding，如：.center {
padding: 70px 0;
border: 3px solid green;
}
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。
.clearfix（父类名） {
overflow: auto;
}