Hugenye的个人博客

网页三剑客之CSS

前端
字数统计: 2.3k阅读时长: 9 min
2020/06/28 8 Share

css简介

什么是CSS

层叠样式标签，css对html进行样式修饰。

样式表：css属性样式的集合，不同的css样式对同一个html标签进行修饰，按照优先级先后引用

css的作用

修饰html使其html的样式更加好看

提高属性的复用性

html内容与样式相分割开，便于后期维护

css的引入方式和书写规范

内嵌样式

1
2
3
4
5
6
 将属性直接写到标签内
<div style="width:50px;color:blue;font-size:50px"> 你们好</div>
语法： 
1.使用style属性，将样式嵌入到html标签中
2.属性写法： 属性：属性值
3.多个属性之间使用;分开

内部样式

在head标签中，使用style标签对css属性的引入

外部样式

1
2
3
4
5
6
7
8
将css提取成一个特有的文件，放置在指定的文件夹中，谁使用，谁引用即可。
<link  rel="stylesheet"  type="text/css"  href="路径" />

语法：  
1.创建css文件，将css属性写到文件中，
2.在head中使用link标签进行引入
3.属性的写法: 属性：属性值
4.多个属性之间使用分号;隔开

css选择器

基本选择器

标签选择器

1
2
3
4
5
标签名{
	属性：属性值;
	属性：属性值
}
<标签名> </标签名>

id选择器

1
2
3
4
5
#id{
	属性:属性值；	
	属性:属性值
}
<div id="id值">this is a div</div>

类型选择器

1
2
3
.类名{
  
}

ps:对使用三种基本选择器对同一个标签进行修改，id>class>标签

属性选择器

1
2
3
基本选择器[属性='属性值']{
			   
			   }

伪元素选择器

1
2
3
4
5
6
7
选择器:伪元素 {
  属性:属性值;
}
CSS 类也可以与伪元素配合使用：
选择器 .类名:伪元素 {
  属性:属性值;
}
属性 描述 CSS
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。 2

伪类选择器

1
2
3
4
5
6
7
选择器 : 伪类 {
	属性: 属性值
}
//CSS 类也可与伪类搭配使用。
选择器 .class : 伪类 {
	属性: 属性值
}
1
2
3
4
5
6
7
8
9
10
11
a四种状态  
1.未选中状态   a:link{ css属性}
2.悬浮状态     a:hover{css属性}
3.出发触发状态 a:active{css属性}
4.完成状态     a:visited{css属性}				
				
四个伪类的声明顺序应该是：':link'、':visited'、':hover'、':active'

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

first-child 第一个元素 

1
2
3
4
p:first-child{
	属性：属性值;
}
注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2

派生选择器

一层一层向下获取标签，遵循元素属性和id选择方式的规则，不同层级之间需要添加 空格

1
2
3
4
5
6
7
8
9
h2 strong {
  color: blue;
}
#len li{
  text-align：right;
}
.fancy td{
  background:#566;
}

后代选择器

1
2
只对 h1 元素中的 em 元素应用样式
h1 em {color:red;}

子元素选择器

1
2
只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}

相邻兄弟选择器

1
2
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
h1 + p {margin-top:50px;}

css属性

文字属性

1
2
3
4
font-size: 80px;
font-family: '黑体';
font-style: italic;
font-weight:blod

文本属性

1
2
3
4
5
6
color:red;
text-decoration:下划线 
属性值：none  underline
text-align 对其方式 
属性值：left right center
line-height

背景属性

1
2
3
4
5
6
7
8
9
10
11
12
background-color:
background-image:背景图片
background-repeat:平铺方式
background-position: 左 上
background:red url("./img.gif") no-repeat right top;

position指定位置
body{
  background-image:url("buy.gif");
  background-repeat:no-repeat;
  background-position: left top;
}

列表属性

1
2
3
list-style-type 列表前面的小标志
list-style-image 列表前面的小图片
url(图片地址);

尺寸属性

1
2
width  100px  100%
height

显示属性

1
2
3
4
5
6
7
8
9
10
11
display  block块级显示 
none  隐藏
inline 行级显示
.css{
  display:block//"把行内标签变为块级标签显示
}
//  示例：form表单提交显示 span内容；
function btnclick(){
  var sp =  document.getElementById("span");
  sp.style.display="inline"
}

定位属性

1
2
3
4
5
position：定位位置		  
    static
    relative
    fixed
    absolute

Static定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom,

Fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

Relative定位

相对定位元素的定位是相对其正常位置

Absoulute定位

绝对位置，相对于html边界的距离，可以将元素设置到页面的任何位置；

浮动属性

1
2
3
4
float： 浮动位置 相对于父容器的位置
		left
		right 
//clear可以清楚浮动，浮动会对正常排序的标签造成影响，所以在使用浮动后，我们通常要进行清除浮动==》.clear{clear:both}

浮动造成的问题：

1、边框和背景不能撑开

2、影响下一个标签的正常显示

盒子模型

CSS 盒子模型(Box Model)是什么？

1
2
3
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

属性

border边框

border-left/right/bottom/top 边框位置

border-style:线型

border-width:线粗 ，可以指定边框的宽度

【边框指定宽度的方法】：1、可以指定长度值，比如20px或者0.2em等等；

或者2、使用3个关键字之一（thick、medium默认值、thin）

border-color；线颜色

padding内边距
1
2
3
4
padding:1px 2px 3px 4px;上右下左
padding:1px 2px;上下/左右
padding:1px 2px 3px;
padding-top:单独设置
margin外边距
1
2
3
4
5
margin:10px;代表上下左右都是10px
margin:1px 2px 3px 4px;上右下左
margin:1px 2px;上下/左右
margin:1px 2px 3px;
margin-top:单独设置

css边框

直角边框

示例：css设置三角图形border-xxx位置的-color

1
2
3
4
5
6
7
8
9
10
11
12
 <style>
        .tr1{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-top-color: red;
            border-bottom: none;
            /* border-left-color: transparent;
            border-right-color: transparent; */
        }
</style>
　<div class="tr1"></div>

border-xxx位置的-color可能设置的值

值 描述
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。
圆角边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop

边框属性：

1
2
3
border-radius：
                 box-shadow  元素阴影
                 text-shadow 文字阴影

基本语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor
}
{box-shadow:[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
/**
box-shadow属性的参数设置取值：

			阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

			X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

			Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

			阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

			阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

			阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
*/

示例：阴影圆角

多背景应用：
 background-image: url(../img/bookcover/101.jpg),url(../img/bookcover/103.jpg);
background-position: right bottom, left top; 
background-repeat: no-repeat, no-repeat;

原文作者：Hugenye

原文链接：http://hugenye.github.io/2020/06/28/css/

发表日期：June 28th 2020, 5:49:23 pm

更新日期：August 19th 2020, 4:40:15 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. css简介
  2. 2. css选择器
  3. 3. css属性
  4. 4. 盒子模型
Total : 18
2020
2019
python 阿里云服务器部署 面试题 Hexo Hexo主题配置 http 前端 JDK8新特性 工作 Bootstrap Python 面试
Hexo JAVA sql