文字半透明
/* 文字半透明
rgba a是alpha透明的意思 取值0~1
*/
div{
color: rgba(255, 0, 0, 0.2);
font-size: 50px;
}
文字颜色
<style>
.red{
color: red;
}
.f00{
color: #00ff00;
}
/* = */
/* li:nth-child(2){
color: #00ff00;
} */
li:nth-child(3){
color:rgb(200, 200, 200)
}
</style>
</head>
<body>
<h1>
color属性用于定义文本的颜色的三种方法
</h1>
<ol>
<li class="red">red，green，black</li>
<li class="f00">#00ff00</li>
<li>rgb(255,0,)</li>
</ol>
</body>
文字阴影
<style>
/* text-shadow文字阴影：水平位置 垂直位置 模糊大小 阴影颜色 */
h1{
font-size: 100px;
text-shadow: 10px 20px 3px rgba(250, 0, 0, 0.3);
}
</style>
行高对齐和首行缩进
<style>
/* 行高对齐和首行缩进
line-height 行间距
text-align 水平对齐方式
text-indent 首行缩进 1 em是一个汉字的距离
letter-spacing 字间距
*/
p{
line-height: 15px; /* line-height 行间距 */
text-indent: 2em; /* text-indent 首行缩进 1em是一个汉字的距离 */
}
h2{
text-align: center; /* text-align 水平对齐方式 */
letter-spacing: 3em; /* letter-spacing 字间距 */
}
h4{
word-spacing: 5em; /* word-spacing 英文单词间距 */
}
</style>
</head>
<body>
<h2>行高对齐和首行缩进</h2>
<h4>jsch ab cdv</h4>
<p>HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，
Web 世界已经经历了巨变。HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，
Web 世界已经经历了巨变。HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p>
<p>HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p>
<p>HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
</body>
部分知识点总结归纳
CSS的注释方式:
/注释的内容/
CSS的引入:
1.行内样式(通过style属性设置)
语法: 属性1: 属性值1; 属性2: 属性值2;
2.内部样式(写在head标签里面,用style标签嵌套)
语法:
选择器{属性1: 属性值1;属性2: 属性值2;}
3.外部样式
1、(新建一个.css文件,用link标签关联)–推荐使用
link标签
rel 定义当前文档与引入文档的关系(relationship)–stylesheet样式表
type 声明引入文件的类型
href 引入文件的路径
语法:
选择器{属性1: 属性值1;属性2: 属性值2;}
2、(写在head标签里面,用style标签嵌套)–不建议使用
语法: @import url()
CSS引入方式的对比:
行内样式只作用于当前标签
内部样式只作用于当前文档
外部样式可重复引用
link和@import的区别:
加载顺序不一样:
(link: 先渲染好CSS, 再显示html和css–房子装修好再入住;
@import:先显示html,再渲染CSS–先住毛坯房,再装修)
CSS选择器的原则:
精准选中需要加样式的标签, 且不影响其他标签
基础选择器:
标签选择器(元素选择器): 直接使用标签名
类选择器(class选择器): 使用.进行选择
id选择器: 使用#进行选择(在一个文档里面必须具有唯一性)
通配符选择器:直接使用*匹配页面的全部元素(一般用于清除浏览器默认的样式)
属性选择器（[属性名]，[属性名=’’])
复合选择器:
交集选择器: 由标签选择器+class选择器|id选择器,中间不能有空格(既要满足标签名,又要满足该class名)
并集选择器: 多个选择器选中的元素共用一个样式,用逗号隔开
后代选择器: 选择元素或元素组的后代(用空格隔开选后代)
子代选择器: 选择元素或元素组的子代(用>选子代)
兄弟选择器: 选择元素后面的兄弟元素(用+选择最临近的兄弟; 用~选择所有兄弟元素)
css里面设置透明的方法有两种：
第一种（opacity)： 设置透明度，当opacity属性值为1时候，
不透明，当它为0的时候，背景字体全部都透明，设置范围0~1；透明度逐渐降低。
第二种rgba(0, 0, 0, ‘透明度’)：用rgba设置背景时，只能设置
背景透明，字体不能根着透明。设置范围0~1；透明度逐渐降低。
盒子模型:
实际宽度 = 内容宽度 + 填充物宽度 + 纸皮的厚度
width = content-width(内容宽度) + padding(内边距) + border(边框)
margin(外边距)不计入实际宽度
padding:10px 10xp 10px 10px ;
padding:
padding-top
padding-right
padding-bottom
padding-left
padding:10px 10px;
(padding的值:
只有一个值时, 表示是上右下左四个方向共用一个值;
两个值时,表示上下为第一个值,左右为第二个值[中间用空格隔开];
三个值时,表示上为第一个值,左右为第二个值,下为第三个值;
四个值时,表示分别对应上,右,下,左(顺时针)
)
margin:
margin-top
margin-right
margin-bottom
margin-left
(margin的值:
只有一个值时, 表示是上右下左四个方向共用一个值;
两个值时,表示上下为第一个值,左右为第二个值[中间用空格隔开];
三个值时,表示上为第一个值,左右为第二个值,下为第三个值;
四个值时,表示分别对应上,右,下,左(顺时针)
)
margin的妙用: 当盒子指定了宽度时, margin: auto可以水平方向居中
border: 线条宽度 线型(dashed|solid) 颜色
border-top
border-right
border-bottom
border-left
(没有指定方向时, 表示是上右下左四个方向共用一个值;)
正常文档流:
元素从上往下排, 从左往右排
什么是浮动?
脱离文档流,将块级元素排成一排
float:
left 左浮动(从左往右)
right 右浮动(从右往左)
none 不浮动
不清除浮动时,父元素高度为0, 会影响下面的元素
清除浮动的方法：
1.知道父级具体高度的时候，直接给父级设置高度
2.在浮动元素后面加换行标签，
(缺点:增加多余的标签)
3.在浮动元素后面加一个空标签，给空标签名一个class名字
块级元素: 独占一行,不设置宽度时,宽度占满屏幕,可以设置宽高;
行内元素: 不独占一行,宽度由内容撑开, 不可以设置宽高;
display: block 转成块级元素(可以设置宽高)
display: inline-block; 转成行内-块级元素(拥有块级可以设置宽高的特点,又行内元素不独占一行的特点)
display: inline; 转成行内元素(不可以设宽高，margin-top,margin-bottom无效)
display: none; 隐藏元素
定位:
相对定位: 相对于元素自身定位发生偏移(原有的位置仍是该元素的)
position: relative;
top–与上方拉开多少距离
right–与右边拉开多少距离
bottom–与下方拉开多少距离
left–与左边拉开多少距离
(相对定位不产生偏移量,对该元素没有任何影响; 一般配合绝对定位使用)
绝对定位: 相对于离它最近的具有position属性的盒子定位，从父级开始寻找有没有position属性，一直找到body标签去都没有，就相对于浏览器窗口定位。
(脱离文档流,一旦设置绝对定位,原有的地盘就没了)
position: absolute;
top–与上方拉开多少距离
right–与右边拉开多少距离
bottom–与下方拉开多少距离
left–与左边拉开多少距离
固定定位: 相对于浏览器窗口固定(脱离文档流)
position: fixed;
top–与上方拉开多少距离
right–与右边拉开多少距离
bottom–与下方拉开多少距离
left–与左边拉开多少距离
1879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
