css操作

本文详细介绍了HTML表单元素的使用,CSS的内联与内部样式,以及各种选择器(标签、ID、类、群组和后代)的应用。重点讲解了布局属性、字体、文本和边框样式,以及如何使用弹性布局实现灵活的容器布局。
摘要由CSDN通过智能技术生成

##表单标签
    表单标签用于收集用户数据。
    <form></form> 描述一个表单
    <input>
    <select></select>
    <textarea></textarea>
    
##CSS 级联样式表(cascading style sheet)
    html 标准下的标签主要的功能是在网页中定义内容(定义网页中有什么)
    而CSS用于为这些网页中的元素添加样式:
                1.设置元素的背景
                2.修改字体大小
                3.改变元素位置、边框、阴影...
                4.为元素添加动画
 ## CSS的写法
      1.内联样式(为标签添加style属性,在属性值中直接设置样式)
     ```
     <h1 style="color:red;">...<h1>
     <img src="....jpg" style="width:150px;">
     ```
     2.内部样式 (在HTML的head的标签中,添加style标签,在style标签中为当前网页的元素设置样式)
      如果一个标签绑定的样式很多,用内联样式就会很长,而且可维护性性很差。建议使用内联样式,
     将样式的设置与标签元素分开定义,在body标签中定义元素,而在head/style标签中定义元素样式。

     语法结构包含两部分:
    1. CSS选择器
         选择器用于选出当前网页中符合条件的一个或多个标签。
    2. CSS样式属性
        样式属性用于对选择器选出的一个或多个他标签添加CSS样式
    
##CSS选择器
1.标签选择器
通过标签名称,选出符合条件的标签
```html
<p>段落文本<p>
```

```html
<style>
p{
    color:red;}
    img{width:150px;}
</style>
```

2.id选择器
    选出网页中某些id属性值符合要求的一个标签。

```html
<h1 id="h1">111</h1>
<h2 id="h2">222</h2>
<h3 id="h3">333</h3>
```

```css
#h1 { color:red; }
#h2 { color:green; }
#h3 { color:blue; }
```

3.类选择器(class选择器)
    选出网页中某些class属性值符合要求的一个标签或多个标签。
    1.在style中定义一类样式。(起个名字)
    2.在页面中为某些需要使用这一类样式的标签,添加相应的class属性。
先定义一类样式:
```css
.red {color:white; background-color:red;}
.blue{color:blue; background-color:red;}
```

```html
<p class="red">文本内容</p>
<h1 class="blue">文本内容</h1>
<h3 class="red">文本内容</h3>
<h4 class="red">文本内容</h4>
```

4.分组(群组)选择器
```css
.red, p, #p2{
    选出所有class="red",所有的p标签,id="p2"的标签,统一添加样式
}
```

5.后代选择器(派生选择器)
以空格作为分隔符,选出后代元素。
```css
p  b{ 可以选出所有的p标签下面的b标签}
.red i{可以选出所有的class="red"的标签下的i标签}
```

###CSS样式属性
    1.布局属性
    2.字体属性
    3.文本属性
    4.背景属性
    5.边框属性
    

##布局属性
什么是布局(layout)?
将元素设置合适的大小,放到合适的地方。

布局相关css样式设置包含以下属性:
```css
p{
    width:200px;  控制元素宽度
    height:200px; 控制元素高度
}
```

不是所有的元素设置width和height都生效,元素可以从显示方式上分为以下3类
    1.块级元素
        常见的块级元素有:form、ul、li、div、h1~h6、p等
        一个块级元素将会占用一行的空间来显示。可以通过width和height
    2.行级元素 (设置width与height无效)
        常见的行级元素有:u、i、b、s、a、input等
        多个行级元素可以在一行中显示,如果一行到头了,则自动折行。
    3.行级块元素  (可以在一行中显示,并且可以设置宽高,例如: img)

有一个css属性可以让元素在这几种显示方式中切换:
```css
a{
    display: inline | block| inline-|block | none
}
```
        display: inline;        按行级元素显示
        display: block;         按块级元素显示
        display: inline-block;  按行级块元素显示
        display: none;          隐藏元素 (不显示该元素)
        
####文本属性
```css
p{
    color: red;                        // 文本颜色
    text-align: left | center | right; // 当前元素的文本水平对齐方式
    line-height: 20px;                   //行高
    text -decoration: none| underline; //文本的装饰
}
```


在css中设置颜色时,可以使用如下语法:
color: red;
color: #f00;
color: #f006;
coLor: rgb(255, 255, 255);
color: rgb(255,255,255, 0.5);|

### 字体属性
```css
P{
font-size: 12px;                                   //字体大小
font-family:微软雅黑;                               //字体
font -weight: lighter| normal I boldI bolder;      //字体磅值
}
```

###
边框属性
```css
div {
border-color: red;             边框颜色
border-style: solid| dashed;   边框样式   solid  为实线边框
border-width: 1px;             边框宽度

border: 1px solid black;
border- left-color: red;            边框颜色
border-left-style: solid| dashed;   边框样式       solid为实线边框
border- left-width: 1px;            边框宽度

border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border- bottom: 1px solid black;
}
```

设置圆角边框
```css
div {
border-radius: 5px; .设置圆角边框的半径5px
}
```

外边距相关:
内边距相关:

##布局属性
 将元素设置合适的大小,放到合适的地方

####设置元素宽高的属性
 1.width
 2.height
 
### 设置元素外边距的属性
 1.margin-top
 2.margin-bottom
 3.margin-left
 4.margin-right
 5.margin: 10px;  上下左右四个方向外边距都是10px
 6.margin: 10px  20px; 上下10px 左右20px
 7.margin: 10px  15px 20px 25px; 上右下左顺时针
 
 8.margin: 某px auto; 上下某px 左右自动设置(平分剩余空间)
 
### 设置元素内边距的属性

 1.padding
 2.padding-top
 3.padding-bottom
 4.padding-left
 5.padding-right
### 设置元素的边框属性
 1.border
 

###弹性布局  display:flex 

css对于容器中的元素的摆放方案有默认的规则:行级标签一行显示,到头了换行:块级元素一个占一行,垂直排列。
但是这种摆放规则很难实现一些常见的css布局需求。

如果一个容器设置了css属性:display:flex后,那么该容器将使用弹性布局来对容器中得子元素进行布局。无论子元素
是行级元素还是块级元素,他们所在的位置都将被弹性弹性盒子来接管。

弹性容器默认情况下有两个轴:主轴 / 交叉轴
弹性容器中的元素会沿着主轴方向进行排列。
可以通过一个css属性来改变主轴的万向;
1. flex-direction: row;      水平轴为主轴
2. flex-direction: column;   垂直轴为主轴
弹性盒子提供了以下属性方便的对子元素进行位置的摆放:
1. justify- content: 在主轴方向整理子元素的对齐方式
    1. start             主轴开始
    2. center            主轴居中
    3. end               主轴末尾
2. Ialign-items:在交叉轴方向上整理子元素的对齐方式
    1. flex-start 交叉轴开始
    2. center     交叉轴居中
    3. flex-end   交叉轴末尾
 

  • 21
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值