便于回顾做的CSS笔记

程序员文章站 2024-01-26 16:08:48

...

*注意：#要给块设置高度，如果只让元素撑起，可能会导致下一个块与其有间距。一个单独的块（也可能是嵌套）只设置高度，不设置宽度，默认跟随上一个块元素的宽度 #banner{height: 500px;}

div ,span都是容器标签。标签内可以用style为内部元素添加样式
text-align:让容器内部元素水平居中 css中，align用text-align代替
空div容器，默认宽度100%，高度0 。往里面填充内容，会被撑起

<div style="color: #555">
     <p style="text-align: center;">
          <span style="background-color: darkgray; color: white; font-size: 24px;">fan_lee</span>
     </p>
<div>

<div id="navigation" style="text-align: center; height: 70px; line-height: 70px; background-color: white;">
*height: 70px;设置块高度为70px   line-height:设置行高70px,可以使里面内容上下居中*
<a href="#" style="text-decoration: none;color: black;margin: 0 15px; ">电影</a>
text-decoration: none; 设置超链接样式 margin:元素的间距
内部样式表是在head里面添加<style type="text/css"><style>标签

便于回顾做的CSS笔记

<a href="#" class="nav" >类别选择器</a> 设置样式 .nav{}  <div id="nav">ID选择器 </div>设置样式 #nav{}
p{width:100px} 标签选择器，对所有p标签都生效 
 *｛｝所有标签都生效
CSS优先级： 行内>ID>类>标签>通用
选择器选择的范围越小越精准，优先级越高
选择器也可以叠加：#bb p .cv>#bb .cv
#sort .ym.fast 多个类时，不加空格 clss ="ym fast"

文本属性：
CSS文本属性：           
   .p1{color: red;} /*文本颜色*/                        .p2{font-family: "arial narrow";}/*字体类型*/
   .p3{font-size: 26px;}                                      .p4{font-weight: bold;}/*字体加粗*/
   .p5{font-style: initial;}/*字体倾斜*/                .p6{text-indent: 50px;}/*首行缩进*/
   .p7{line-height: 100px;}/*行高*/                    .p8{text-align: center;}/*字体居中*/
   .p9{height: 100px;background-color: #FF0000; line-height: 100px;}    
   .p10{text-decoration: underline}/*字体修饰*/

所以当body是空标签时候，如果想让页面显示，可以给html标签设置大小
便于回顾做的CSS笔记

背景图属性：
 background-image: url(001.gif   );      background-size: 500px（宽 高）;
 background-repeat: no-repeat;        background-position: left bottom;

#插入图片占据空间结构，背景图属于网页的样式，背景图上可以显示文字等
容器尺寸 =图片尺寸，背景图正好显示在容器内，大于，背景图平铺，直至铺满。小于，只显示部分背景图、
插入图片大于容器尺寸，会溢出#

边框：         
 		border-color: #000000;
	    border-style: solid;
        border-width: 1px;

便于回顾做的CSS笔记
浮动用float，元素脱离固定位置，浮动
浮动元素不能撑起父元素，因此在浮动元素的内容会覆盖下面的内容，若想摆脱影响，有三种解决办法：
1. 给父元素设置高度
2. 给父元素设置 overflow:auto;
3. 想要摆脱浮动影响的内容设置clear:left/right/both
便于回顾做的CSS笔记
浮动元素在排列时，只参考前一个元素的位置

ul{margin: 0 auto; } 整体在父标签里居中显示，想让那个块居中，就给块设置 margin: auto
*{margin：0 padding:0 } 首先清除所有标签的边距
直接给图片添加外边距，会使图片超出父标签内

便于回顾做的CSS笔记

a可以简化写：a:{color:}a:hover{}三个相同，只有划过时不同

ul : list-style-type 设置序号样式 (不同浏览器显示会有不同)  
list-style-image ：url();也可以用图片代替 
list-style-position: inside/outside

给每一行增加前面的序号， position是左边上下50% padding-left是使文字不覆盖图片
便于回顾做的CSS笔记

如：.ab{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 30px;list-style-position: inside; }
           <ol class="shiju" type="A">
               <li class="ab">有一种诗词，</li>
               <li class="ab">唯美动人，让人回味无穷sssssssssssssssssss。</li>
               <li class="ab">下面五十句唯美诗句，</li>
           /ol>
;list-style-position: inside这样才能显示序号

img 和表单input th等默认是inline-block
display：none 元素不会被显示，并脱离文档流
display: list-item 将元素转换为列表 li的默认类型不设置宽度时撑满一行独占一行支持宽高列表默认是list-item
便于回顾做的CSS笔记

可以设置层叠顺序，数值越大越靠上

动手敲一个网页的时候，应该先设计网页的整天版块，计算各个块的占比，间距之类的，设计好Div，再往div里面添加内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>design</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#header{
				height: 3.125rem;
				background-color: #008000;
			}
			#header .head{
				margin: auto;
				height: 50px;
				width: 1005px;
				text-align: center;
				line-height: 50px;
				background-color: #2E8B57;
			}
			#header .head a{color: white;}
			#header .head a:hover{color: black;}
			#header .head .item{
				padding: 0 20px;
				text-decoration: none;
				border-right: white 1px solid;
				color: white;
			}
			#header .head .item.last{border: none;}
			#banner{height: 500px;}
			#banner img{width: 100%; height: 500px; background-repeat: none; }
			#cate{
				width: 1005px; 
				height: 200px;
				margin: auto;
				background-color: #FF4500;}
			#cate .item{
				width: 125px; height: 165px;
				padding: 25px 25px 10px 25px;
				border-right-color: blue;
				border-right-width: 1px;
				border-right-style: dotted;
				float: left;
			}
			#cate .item.fast{padding-right: 0;}
			#cate .item.last{padding-right: 0; border: none;}
			#case{				
				height: 490px;
				background-color: seagreen;
				}
			#case .text{
				width: 1005px;
				color: white;
				text-align: center;
				margin: auto;
				padding: 20px 0 10px 0;
				font-size: 45px;
				font-family: "lucida sans unicode";
			}
			#case .wapper{
				width: 1000px;
				overflow: auto;
				margin: auto;
			}
			#case .wapper .item{
				width: 320px; height: 20.625rem;
				background-color: #A52A2A;
				float: left;
			}
			#case .wapper .item.mg{margin: 0 20px;}
			#case p{
				width: 950px;
				margin: 10px auto;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: white;
				font: 20px "calisto mt"  ;
			} 
		</style>
    </head>
	<body>
		<div id="header">
			<div class="head">
				<a href="#" class="item">首页</a>
				<a href="#" class="item">跑步</S>
				<a href="#" class="item">乒乓球</a>
				<a href="#" class="item">篮球</a>
				<a href="#" class="item last" >足球</a> 
			</div>
		</div>
		<div id="banner">
			<img src="ad3.jpg">
		</div>
		<div id="cate">
			<div class="item fast"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item last"></div>
		</div>
		<div id="case">
			<div class="text">
				Fan.lee
			</div>
			<div class="wapper">
				<div class="item"></div>
				<div class="item mg"></div>
				<div class="item"></div>
			</div>
			<p>查看更多</p>
		</div>
	</body>

<! 看的视频是千峰，截取了一些图片>

便于回顾做的CSS笔记

便于回顾做的CSS笔记

怎样更改有透明iframe做背景的字体样式，使其不受底层颜色影响？求大神指教！！_html/css_WEB-ITnose

CSS可以做的几个令你叹为观止的实例分享

css3的学习笔记_html/css_WEB-ITnose

HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

纯CSS做hover离开后的平滑过渡动画

应用开发中涉及到的css和php笔记分享_PHP

Web前端新人笔记之height、min-height的区别_html/css_WEB-ITnose

运营笔记：一个新公众号怎么吸粉？看看这位大神怎么做的！

有没有做seo的同学进来看下_html/css_WEB-ITnose