CSS样式

叁歲伎倆 2023-06-25 03:04 16阅读 0赞

1、CSS介绍  
CSS指层叠式表，组成成分：  
选择器: 改变样式的HTML元素  
一条或多条声明:每条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号（：）分开  
2、导入CSS方式  
（1）内联样式表，只适合应用于一个页面

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

或通过 style标签定义内部样式表  
注意：块间距：margin:5px;  
(2)外部样式表，多个页面可使用同一个样式表可以使用外部样式表来导入，通过标签，对页面进行渲染,如：

3、CSS选择器，用于选择需要添加样式的html元素，即在html中引入样式的不同形式  
（1）id选择器  
使用‘\#’引入，它引入的是id属性中的值  
（2）类选择器  
需要在类名前前加一个‘.’  
（3）元素选择器  
文本中的元素是选择器  
（4）属性选择器  
如果需要选择有某个属性的元素，而无论属性是什么，可以使用属性选择器  
伪类，向某些选择器添加特殊效果  
4、CSS属性  
（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）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]  
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：默认值，保持标记于文本的左侧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 1]  
（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;  
\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191224225433766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191224225538151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA==,size_16,color_FFFFFF,t_70