CSS

最新推荐文章于 2024-11-07 18:41:16 发布

last1209

最新推荐文章于 2024-11-07 18:41:16 发布

阅读量118

点赞数 2

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/weixin_46159219/article/details/114254692

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表

层叠：多个样式，可以作用在同一个html的元素上，同时生效

好处:

功能强大
将内容展示和样式控制分离
- 降低耦合度（解耦）
- 让分工协作更容易
- 可以提高开发效率

CSS的使用

CSS与html结合方式

内联样式

在标签内使用style属性指定css代码（不常用）
内部样式

在head标签内定义style标签，style标签的标签体内容就是css代码

   <head>
   	<style>
   		div{
   			color:blue;
   		}
   	</style>
   </head>
   
   <body>
       <div>
           hello
       </div>  
   </body>

外部样式
1. 定义css资源文件
2. 在head标签内，定义link标签，引入外部的资源文件
  
  a.css文件：
  方法一：

   div{
      color:green;
   }

   <link rel="stylesheet" href = "css/a.css">

方法二：

   <style>
      @import "css/a.css"
   </style>

注意：

1,2,3方式，css作用范围越来越大
1方式不常用，后期常用2,3

css的语法

格式：

   选择器 {
      属性名：属性值；
      . . .
   }

选择器

选择器：筛选具有相似特征的元素

基础选择器

id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一

#id属性值{}

元素选择器：选择具有相同标签名称的元素

标签名称{}

类选择器：选择具有相同的class属性值的元素

.class属性值{}


.cls1{...}
<p class = "cls1">呵呵</p>

扩展选择器

选择所有元素： *{}
并集选择器：选择器1，选择器2{}
子选择器：筛选选择器1元素下的选择器2 选择器1 选择器2 {}
父选择器：筛选选择器2元素的父元素选择器1 选择器1 > 选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素 元素名称[属性名='属性值']

     input[type="text"]{
     
     }
        
     <input type="text">

伪类选择器：选择一些元素具有的状态 元素：状态{}
如<a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态

	a:link{
   		color:pink
	}
	...

属性

字体、文本
font-size:字体大小
color:颜色
text-align：对齐方式
line-height：行高
背景

	background：url("...") no-repeat center;

边框：border，设置边框，符合属性

	border:1px solid red;

盒子模型：控制布局
- margin：外边距
- padding：内边距
- float：浮动

 	<!--设置盒子的属性，让width和height就是最终盒子的大小： -->
	box-sizing:border-box

以上为个人学习笔记，参考自黑马教程，若有雷同，纯属巧合。

last1209

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录