css基础

最新推荐文章于 2024-10-01 23:54:35 发布

cassiechp

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量158

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cassiechp/article/details/89681197

css基础

css简介
简单理解它是html语言的一个应用，css可以修饰各种动态和静态页面，对页面中的元素进行精准控制（是像素为单位的），css的诞生是为了解决html的显示功能，它解决了html显示杂乱和臃肿的问题
语法特点：
Css样式表主要由很多样式规则组成，规则主要由两部分构成：选择器+一条或多条声明（属性和值）。
Css和html、javascript的关系是什么？
- Html是标记语言，用于构建网页的框架，基础。
- Css主要定位页面元素的样式，比如说高、宽、颜色等，修饰。
- Javascript是客户端脚本语言，主要完成页面的交互，行为。
- css引入方式
  - 行内式
    <p style="background-color: #00a2ca">chenhongping</p>
  - 嵌入式
```
<head>
        <style type="text/css">
               ...此处写CSS样式
       </style>
       </head>
```
  - 导入式
```
<style type="text/css">
                    @import"mystyle.css"; 此处要注意.css文件的路径
         </style>
```
  - 链接式
```
  ```
      <link href="mystyle.css" rel="stylesheet" type="text/css"/>
  ```
```
css选择器
1、基础选择器
- 匹配任何元素用*，包括body元素： * {}
- 标签选择器，匹配所有P标签，格式如下:p{}
- id选择器和class选择器，css样式id调用里用： #id名字调用； class调用用：.类名{}

 #chen{
            background-color: #00a2ca; # id调用方法
        }
        p.chenhongping{
            background-color: #197991;  #只应用于p标签
        }

2、组合选择器

多元素选择器
同时匹配所有E元素或F元素，E和F之间用逗号分隔

p,div{
            background-color: #00a2ca;
        }

后代选择器
后代选择器匹配所有值得元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中

 div p {
        background-color:yellow;
        }
         <div>
    <p>在 div 中。</p>
    <p> 在 div 中。</p>
    </div>

子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

        div>p {
        background-color:yellow;
        }
 <div>
    <h2>My name is Donald</h2>
    <p>I live in Duckburg.</p>
    </div>

只改匹配了上面形式?
下面没有匹配?

    <div>
    <span><p>I will not be styled.</p></span>
    </div>

、相邻元素选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

<h1>Welcome to My Homepage</h1>
    <div>
    <h2>My name is Donald</h2>
    <p>I live in Duckburg.</p>
    </div>
    <p>My best friend is Mickey.</p>
    <p>I will not be styled.</p>

上面?只有My best……起作用

3、伪类选择器：
伪类选择器：专用于控制链接的显示效果，伪类选择器：

a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
CSS的常用属性
1、颜色属性

<div style="color:blueviolet">ppppp</div>输入颜色英文单词

<div style="color:#ffee33">ppppp</div> 16进制颜色样式

<div style="color:rgb(255,0,0)">ppppp</div> 红绿蓝三原色按顺序

<div style="color:rgba(255,0,0,0.5)">ppppp</div> a代指透明度

2、字体属性：

font-size: 20px/50%/larger 字体大小

font-family:'Lucida Bright' 字体样式

font-weight: lighter/bold/border/ 字体粗细

line-height:40px; 字体上下调到居中位置

<h1 style="font-style: oblique">老男孩</h1> 斜体

3、背景属性

background-color: cornflowerblue 背景颜色

background-image: url('1.jpg');打开一个图片当做背景图片

background-repeat: no-repeat;(repeat:平铺满) 不平铺

background-position: right top（20px 20px）;(横向：left center
right)(纵向：top center bottom) 相当于扣一个洞拿到自己想要的图片位置

<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

4、文本属性

font-size: 10px;
text-align: center;横向排列
line-height: 200px;文本行高通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
p
　　{ width: 200px;
　　height: 200px;
　　text-align: center;
　　line-height: 200px; }
text-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比
letter-spacing: 10px; 字体间距
word-spacing: 20px;
direction: rtl; #右边开始
text-transform: capitalize; #字母
5 边框属性：
border-style: solid;
border-color: chartreuse;

border-width: 20px;

 <!--第一种：线的粗细为1像素，实线、红色-->
 <div style="border:1px solid red;height:10px" ></div>
 <!--第二种：线的粗细为1像素，点、蓝色-->
 <div style="border:1px dotted blue;height:10px" ></div>
 <!--第三种：线的粗细为1像素、虚线、紫色-->
 <div style="border:1px dashed purple;height:10px" ></div>

6 、dispaly属性

none（不显示）
block （一整行）

inline（只包含字）

<!--display 为none将隐藏标签-->
 <div style="display: none;">pppp</div>
 <!--display 为inline会将块级别标签调为内联标签-->
 <div style="background-color:red;display:inline">ppp</div>
 <!--display 为block会将内联标签调为块级别标签-->
 <a style="background-color:red;display:block">pp</a>

7、列表属性

ul,ol{ list-style: decimal-leading-zero;
 　　        list-style: none;  #去掉前面符号
　　　　　　 list-style: circle; #列表样式
 　　        list-style: upper-alpha; #列表样式
  　　       list-style: disc; } #列表样式
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

8、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
9、浮动
float:right
float:left
clear : none | left (左边不允许出现浮动元素)
clear : right | both
10、 position
position : static | relative| absolute
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位
static，默认值 static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置
position:fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。