css part1

CSS一般写在<head>和</head>之间 

新增<style></style>,代码写在这之间

代码:

<head>
 <style>
 p{/*具体改什么样式*/
   /*属性名:属性值;*/
   
  }

 </style>
</head>

以上代码中p表示给<p></p>中的内容改样式

样式名:

字体属性:

font-size:npx 字体大小 ,n为具体数字,px表示像素

font-family: 文本字体

font-weight:n 纯数字无单位 n=700表示加粗 n=400表示正常粗细 100 < n < 900

font-style:文字样式 normal为正常 italic为斜体

font:属性连写 示例:

字体复合属性写法:

body{

        font:font-style  font-weight  font-size/line-height font-family

}

不可更换顺序,其中 font-size 和 font-family 不可以省略

文本属性:

color:颜色 三种使用方法:

                 1.red blue ...

                 2.#FF0000(六个十六进制)

                 3.rgb(n,n,n)

text-align:文本对齐

                 1.left(默认)2.right 3.center

text-decoration:文本装饰

                 1.underline 下划线

                 2.line-through 删除线

                 3.overline 上划线

                 4.none 什么都没有(默认)

text-indent: 1.npx 首行缩进n个像素

                   2.nem 首行缩进n个文字大小  

line-height:npx 行间距为n像素  行间距=上间距+文本高度+下间距

css 简单概括:选对象,改对象。

选对象要用选择器。

选择器分为基础选择器和复合选择器。

基础选择器:

标签选择器:如上代码,缺点是要改就全改,无法选中具体某个p。

类选择器可以单独选择一个或者某几个。

类选择器语法:(最常用)

.red{/*具体修改方式*/
  }
<div class = "red">/*要修改的内容*/</div>

class的具体值自定义,但不可以用标签的名字

class可以有多个类名,不同类名之间空格

id选择器语法:

#red{/*具体修改方式*/
  }
<div id = "red">/*要修改的内容*/</div>

id选择器只能调用一次,类选择器可以调用多次

通配符选择器:

*{/*修改方式*/

}

表示将所有元素统一修改,即全选

复合选择器:

后代选择器:

元素1 元素2{样式声明}:改变所有元素1里的元素2

可以继续添加元素3元素4 

子选择器:

元素1>元素2{}

只选元素1的儿子元素2 

并集选择器:

元素1,元素2{}

元素1和元素2一起改

链接伪类选择器:

a:link{}  未访问的链接

a:visited{} 访问过的链接

a:hover{} 鼠标经过时的链接

a:active{} 鼠标点击时的链接

以上四个标签顺序不可更改

实际常用方法为

a{}

a:hover{}

focus伪类选择器:

input:focus{} 光标点击时的input,其中的color属性更改文字颜色

css引入方式:

1.内部样式表:在html页面内部写样式,单独写到style标签里面。

2.行内样式表:直接在标签内部写 <p style="color:pink;line-height:16px;"></p>

3.外部样式表:

            (1)新建一个后缀为.css的样式文件,把css代码都写在此文件中

            (2)在HTML页面中使用<link>标签引入此文件

<link rel="stylesheet" href="css文件路径">

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值